CODEWITHSUNDEEP
javascriptwebpackweb-applicationsprogressive-web-appsservice-worker
Dimitri Kopriwa
Dimitri Kopriwa

Reputation: 14415

new ServiceWorker not detected

I have just published our webapp to production with a change in our service worker.

When I look at developer tab > application > service worker, it looks like this :

enter image description here

If I clique on Mettre à jour (aka Update), the 2nd blue link from within the service worker option in the screenshot, the app will update. But it looks like the new service worker is not detected otherwise.

When a new service worker is detected, there is a transition state that should look like this:

enter image description here

Then, to install the new version you can call serviceWorker.skipWaiting() to upgrade it. The problem is that in the state we have, it is not like this. It really looks like the new service worker is not detected.

This is how we normally call the skipWaiting https://github.com/pass-culture/pass-culture-app-native/blob/master/src/service-worker.ts#L72-L83:

// This allows the web app to trigger skipWaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting()
  }
})

// This allow the web app to trigger skipWaiting when a new SW version is available
self.addEventListener('install', () => {
  self.skipWaiting()
})

The first event listener is for when we edit our chunk, it will emit a message event and we will call the skipWaiting(), and the second is for when we edit the service worker itself, it will emit an install event, then we will call the skipWaiting().

I don't understand the current state of our production service worker and I am concerned loosing thousands of users with this upgrade, what should I do?

Upvotes: 1

Views: 448

Answers (1)

Chris Love
Chris Love

Reputation: 3893

At first glance your service worker is registering as you expect. Event triggers the install home screen icon in the address bar, so good job there!

I think what you are trying to verify is when you update the service worker on the server, when does the browser recognize this server-side update.

The answer is 'it depends'...sucks I know. Generally, this should happen when a new session of your application starts. The browser will check for an updated response from the server. But this may not always be the case.

There is no 100% rule, but the browser may have a built in time to delay checking for an update, say every 24 hours. This is done to reduce network traffic, etc. The browser itself most likely has some internal heuristics to determine when it thinks is the best time to check.

So, always make sure your Cache-Control headers, and any header that will indicate an update to the file have been made are in being served, and don't forget to make sure your server supplies these updates for a HEAD request.

Once an update is made there is a life cycle the service workers must go through before the new version can take over. Here you could even prompt the user to enable the update, etc. There is no 1 answer for this, but you are on the page using skipWaiting, but if your update may have breaking changes you will want to either let the user verify or wait for the next clean session. Just like any application that updates in the background while you are using it :).

BTW, I have seen your question or variations numerous times over the past 8 years, so don't feel like you are missing something. Service Worker Life cycle is a common issue for developers to get their head around. I have seen a lot of confused faces when I have done PWA workshops, etc.

Upvotes: 0

Related Questions