Site cannot be installed: no matching service worker detected

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

Solution 1:

Place the service worker script file at the root of your website and set start_url to /, or place it wherever you want and use the scope property and the Service-Worker-Allowed HTTP header as in my other answer.

Solution 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.