PWA Service Worker Cache Problem

[DanielMiller-agile6]

I ran into an issue after deploying some changes to the website related to our PWA implementation.

Our site is configured to use a Service Worker to cache the website locally and support offline access. When a new version of the site is deployed, any visitors who already have the cached service worker may not be able to see new content until they either force a hard page refresh, or clear cached application data manually.

I also noticed that even if the visitor does a hard page refresh, if they use the browser's refresh button after, they may revert back to the previously cached version of the app, and will no longer see the latest version.

I think the only fix for this is to add some functionality that can display a notification to the user, which will direct them to refresh the app using an app rendered UI control. Here's some more information about the issue:

• https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68
• https://github.com/vuejs-templates/pwa/issues/177
• https://github.com/vuejs-templates/pwa/issues/70

More general information about service workers and vue-cli integration:

• https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
• https://levelup.gitconnected.com/vue-pwa-example-298a8ea953c9

Another fix could be to remove the service worker functionality and allow the function to work as a normal web page, but this would break existing offline functionality.

[DanielMiller-agile6]

I read a bit more on service workers, and this may not be a problem for most users. I'll re-test the next time we make an update, but this may only effect users who have the previous version of the page opened in a tab and try to manually refresh. This might be resolved for users who close all instances of the site and revisit.

[DanielMiller-agile6]

I ran into an issue again with the latest updates to the site. I wasn't able to see the newest content on safari until i cleared cache. So this is likely something we'll need to investigate further and address.

[jonadecker]

I'm with you @DanielMiller-agile6 ... for a marketing/informational website, more important that site is current vs. a PWA with caching problems

[ElijahLynn]

I volunteer to fix the caching issue and stick with a PWA. There are multiple caching patterns that can be used with a Service Worker and first step is to see what we are using.

[ElijahLynn]

Here's some more information about the issue:

• https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68

This is great, digesting now. Won't be able to really dig into this until next week though.