无法安装站点：未检测到匹配的服务工作者

Question

Hey I am trying to program my first pwa and got the following problem:

when I start my web app I get the following error:

Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

I think my manifest url is right because of this link

manifest.json

"start_url": ".",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#29BDBB",
"background_color": "#29BDBB"

and I register my sw like this:

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(reg) {
    console.log('Successfully registered service worker', reg);
}).catch(function(err) {
    console.warn('Error whilst registering service worker', err);
});
}

I got my sw from here

So I am trying to make a simple web app which I can host with firebase .

Whats the problem? Thanks for your help

Answer 1

将 Service Worker 脚本文件放在您网站的根目录并将start_url设置为/ ，或者将其放在您想要的任何位置并使用scope属性和Service-Worker-Allowed HTTP 标头，如我的其他答案。

Answer 2

Just in case this happens to anyone else using Angular8+. You may need to change your registration strategy to:

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' }),

By default, this is set to registerWhenStable , which is when there are no pending tasks, things like setTimeout() , etc. By changing it to registerImmediately , it will register your service worker as soon as it possibly can.

Just thought I'd share this and add it here, as this lost me a few days trying to work it out.

Answer 3

The create react app service worker only goes into effect in production, so build it and serve it locally to test that the service worker is working properly.

Install serve npm first, if it isn't already: npm i serve -g

Then...

npm run build

serve -s build

It's also likely that once the service worker registers successully, but something like beforeinstallprompt might not get called. If that's the case, publish the app using a host like firebase, which will serve the site over https , then try the beforeinstallprompt there.

Answer 4

Try making the following changes:

• In manifest.json , the start_url and scope is set like this (or based on your preference):

   "start_url": "/", "scope": "."

• The sw.js file is located at project root, taking start_url as reference.

Answer 5

for my work well updating the library "@angular/service-worker":"^7.2.15" to the version, "@angular/service-worker":"^ 8.2.3"

also placing: ServiceWorkerModule.register ('ngsw-worker.js', {enabled: environment.production, registrationStrategy: 'registerImmediately'}),

Answer 6

one way to solve this problem is by adding a query parameter after your service worker include. so normally you html will look like this.

<script src="https://example.com"></script> 

you could modify it to look like this

<script src="https://example.com?v=1.1"></script>