Force Update to PWA Without Manual Refresh Or Toaster Button Click

[kblestarge]

sw-precache is great and easy to use. I don't understand, however, how to configure it with the ability to push out a "hot fix" so that the app is always the newest version.

This is my understanding of what's currently happening:

• User goes to website
• Service worker is registered and caches a version of the app
• User leaves website
• Developer publishes new version of website
• User goes to website again, cached version of app (outdated) is used but the service worker at least recognizes the new version and replaces the outdated version in the cache with the new version.
• At this point, one of two things happens:
  1. Toaster popup button prompts the user to "update to new version of app", which when clicked, updates the app.
  2. Nothing happens. User continues using old version of app until they refresh the page.

I want there to be a third option: iii. The app is refreshed automatically once the service worker knows there is a new version.

I'm sure this is not an uncommon thing to do. I just don't know how to configure sw-precache to make this happen. Is it something to do with the skipWaiting option in the config?

[midzer]

@kblestarge i think you can do a forced window.location.reload() on your own if content becomes outdated. Check out my implementation here https://github.com/midzer/eisolzried/blob/4c92088edc3f9b3dca6afaff311602415acd3a5a/_assets/js/service-worker-registration.js#L63 which is basically taken from chromestatus.com implementation.

[jeffposnick]

@midzer is correct. It's not necessarily the best user experience—it's kind of similar to how Android apps are force-quit when they're updated in the background via the Play Store, which folks tend to find annoying. But forcing a reload is an option.

[kblestarge]

Thanks for the suggestion and implementation @midzer. @jeffposnick, is there a better "user experience" way of handling this without the use of a toaster notification or a forced page reload?

[jeffposnick]

If you have a single-page app, something that I've seen folks do is to detect a new SW version and disable pushState()-style navigations when that happens, instead triggering a full navigation the next time someone clicks on a link. The response to the full navigation should be handled by the new SW.

The particulars of doing that are dependent on the way you implement client-side routing in your SPA.

(My personal preference is for the "Toast" popup message, but that's just me.)