64

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

Johannes Gnadlinger
  • 1,339
  • 1
  • 12
  • 32
  • Is protocol `https:`? Is `` included at HTML? – guest271314 Aug 06 '17 at 16:42
  • yeah you can find my website in the firebase link (https://shoppinglist-ecea7.firebaseapp.com/) and I added the link my manifest.json is in the same folder like my index.html and my firebase files – Johannes Gnadlinger Aug 06 '17 at 17:39
  • Was able to register `ServiceWorker` though not sure about web app portion https://plnkr.co/edit/7CneKIN60FSNa1qt3TrY?p=preview – guest271314 Aug 06 '17 at 17:41
  • thank you for your help finally registered my ServiceWorker too! what do you mean with app portion? and do I need the fetch() ? because I did mine without it.. – Johannes Gnadlinger Aug 06 '17 at 18:21
  • `fetch()` is not necessary. Included to check if the process performed as expected. Have not previously been aware of a `manifest.json` relating to `ServiceWorker`, is the application for mobile applications only? No manifest was listed at `Application` tab – guest271314 Aug 06 '17 at 18:29
  • no the application should be for all platforms what's my fault? – Johannes Gnadlinger Aug 06 '17 at 18:40
  • Did not post that there was a fault. Just not familiar with the procedure, here. – guest271314 Aug 06 '17 at 18:41
  • okay so what is the familiar procedure? I cant find a good documentation about pwa... – Johannes Gnadlinger Aug 06 '17 at 19:16
  • How is my manifest.json related to my sw? – Johannes Gnadlinger Aug 06 '17 at 19:58
  • Apparently not at all that am aware of. – guest271314 Aug 06 '17 at 20:02
  • You may refer with this [link](https://github.com/GoogleChrome/samples/issues/466) which suggested to put the manifest.json on the root folder not in assets/. Once in root folder change `"start_url": "../index.php"` to `"start_url": "."`. Here's a related [SO post](https://stackoverflow.com/questions/43227900/web-app-banner-install). – abielita Aug 07 '17 at 13:40

6 Answers6

48

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.

Ashraf Sabry
  • 3,081
  • 3
  • 32
  • 29
  • When running this command `ng add @angular/pwa --project ng-zero` where is the service worker being installed ? – Stephane Oct 18 '18 at 11:32
  • 1
    @Stephane Can't you find the `ngsw-worker.js` file? Frankly, I don't have experience with this CLI tool – Ashraf Sabry Oct 19 '18 at 19:48
  • 1
    @Stephane The ngsw-config.json, which builds the ngsw-worker.js is located in the root folder of your angular application – Marvin W. Jan 09 '19 at 11:45
  • 1
    Wow, it seems a small detail, but it was not working for me without it. Now that I placed the ws in the root folder, it works perfectly. Thank you! – Fabio Nolasco Jan 19 '20 at 00:46
31

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.

Wesley Coetzee
  • 4,768
  • 3
  • 27
  • 45
19

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.

andimiya
  • 489
  • 4
  • 9
2

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.

Harita Ravindranath
  • 390
  • 5
  • 7
0

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'}),

Rolando Moncada
  • 21
  • 2
    This is essentially the same as https://stackoverflow.com/a/61152966/1507124, if that worked consider adding this as a comment to that question – CervEd May 07 '20 at 14:00
  • yes, but without changing the version of the service-worker it cannot, because the class does not present the attribute 'registrationStrategy' – Rolando Moncada May 08 '20 at 18:15
  • I might be wrong because I just glanced over this, but to me, your answer looks identical to one of the already provided ones. In which case, it's inappropriate as an answer but perhaps valuable as a comment to let others know it worked for you – CervEd May 08 '20 at 18:29
-2

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>
DilanTsasi
  • 186
  • 2
  • 7