Skip to content
Advertisement

Service worker – update cache on new version using skipWaiting()

I have implemented Workbox to generate my service worker using webpack. This works – I can confirm revision is updated in the generated service worker when running "generate-sw": "workbox inject:manifest".

The problem is – I have noticed my clients are not updating the cache after a new release. Even days after updating the service worker my clients are still caching the old code and new code will only load after several refreshes and/or unregistering the service worker. For each release I have confirmed that the revision is updated.

I understand that I need to implement skipWaiting to ensure the clients gets updated – especially PWA. I have read, and tried to follow the 3rd approach here: https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68.

My app mounts in app.js

I have added this code to serviceWorker-base.js

JavaScript

I have this code in app.js

JavaScript

The problem with this code is that promptUserToRefresh() only gets called on initial service worker install, not when a new service worker is waiting!

Also, I get the below error when accepting the first install.

JavaScript

The error gets triggered in promptUserToRefresh(registration) by registration.waiting.postMessage('skipWaiting')

I have also tested this approach with the same result: https://github.com/GoogleChrome/workbox/issues/1120

Advertisement

Answer

The code now works after simply re-arranging it!

Updated app.js

JavaScript

Maybe the below (removed) lines caused all the trouble?

JavaScript

All that remains now is figuring out how not to show the prompt on first visit to the app / install! (^__^)/

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement