0

Description

In a Web Application, we use a service-worker for a few task such as:

  1. PWA
  2. Web push
  3. detecting when new version has been published and if yes, reload to the newest version

We decided to remove Web push feature, this cause the service worker to have a new version.

This is the commit commit.

    self.skipWaiting()
  }
})
-
- // This will add batch sdk service worker
- self.importScripts(process.env.PUBLIC_URL + '/batchsdk-shared-worker.js')

For some reason, we never go through the event that call skipWaiting(): https://github.com/pass-culture/pass-culture-app-native/blob/master/src/service-worker.ts#L76

// 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 is the state of our app when detecting the new version

image

If I click on skipWaiting in the developer tab, then the update perform normally.

Expected result

On a new release:

  1. Of the application without change to the service worker: the event gets called and we call self.skipWaiting()
  2. Of the service worker: it should also call skipWaiting()

Actual result

(1) works as expected, the skipWaiting() is called, however, when we are in (2), the release of a new version of our service worker detect the update but skipWaiting() is never called.

Question

In the case of a new service worker version, how can we call skipWaiting() to update the service worker automatically ?

Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
  • Can you elaborate on what you mean that it reloads the same version? – Vimal Patel Aug 15 '22 at 13:37
  • Does this happen on all browsers or one particular browser? – StormyKnight Aug 15 '22 at 21:43
  • @StormyKnight It happens on all browsers. We found the commit that add the problem, but reverting it does not solve the problem. – Dimitri Kopriwa Aug 16 '22 at 07:41
  • @VimalPatel when service worker detect new version, we set in the global scope of the DOM `window.pcupdate = true` https://github.com/pass-culture/pass-culture-app-native/blob/master/src/web/useServiceWorker.tsx#L109 , then , when we navigate to a new page using the client side routing, we use `window.location.reload()` to reload the app https://github.com/pass-culture/pass-culture-app-native/blob/master/src/features/navigation/services.ts#L16 – Dimitri Kopriwa Aug 16 '22 at 07:43

1 Answers1

1

When a new app is published, the new service worker automatically detect the new webapp, but it does not install this, for this, you must call sw.skipWaiting(), either automatically or using a button.

This was working with the following code within the service worker:

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting()
  }
})

However, it is working only if the chunks of our application change. In case of a modification of the service worker (and new version of it, not the webapp), then this event is not triggered. I manage to fix this, by adding in our service worker the following:

self.addEventListener('install', () => {
  self.skipWaiting()
})

New service worker needs to install and thus emit an install event.

Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204