Workbox: Caching issue with service worker

Created on 6 Apr 2018  路  4Comments  路  Source: GoogleChrome/workbox

Using webpack workbox plugin with React.

Browser & Platform:
All browsers

Issue or Feature Request Description:
Browsers which have old cached files are not detecting changes in the service worker when updated or deleted. When cache is cleared, everything reloads and the site is back to functioning properly. However browsers holding old cached files, as shown below in chrome dev tools, aren't picking up any new changes made, and are keeping old files (index.html shown below is not what it should be)

image

Here are the requests on refresh:
image

I could clear cache / unregister the service worker and everything works fine, however, I'd prefer not to email users to do this. I have since gotten rid of the service worker since I obviously need to research more about how they work, a blunder on my behalf.

I've also tried to include a script in index.js to unregister the service workers, as well as the cached files, however, the older cached browsers don't pick up this change.

I'm not sure if this is relevant to this issue, however if it helps at all: before this I was working on a cache busting issue which I've since fixed using [name].[chunkhash].js in webpack.config.js as the output filename.

Below is the javascript console log, which is expected I believe since the js file is sending back starting with "<".
image

Are there any suggestions for this? And if there's any other useful info I can provide to help solve this issue, please let me know.

Most helpful comment

This was an implementation error on my part. It looks like giving 0 maximum age would've fixed the issue if I had it from the start, along with the no-op SW... I'll look into those resources @jeffposnick and take your suggestions @piehei. I will also post these types of questions on SO from now on. Thanks for all of the resources guys! Greatly appreciated.

All 4 comments

Two things:

  1. Browsers will update the SW script automatically if you make any changes to it. This might, however, take upto (but no more) 24 hours.

  2. Your problem is most likely this: your new SW registration fails because of some error AND the failure means that the new version of SW will NOT take over the clients. So failure in the registration of the new version causes users to stick to the old one.

  3. Make sure your SW.js is served with cache control headers no-cache.

Ps. This is more like a Stack Overflow question than an issue in Workbox library :-)

This info describing Workbox's precaching behavior, as well as this general info on the service worker update flow might help answer some of your questions.

Using service worker precaching to handle navigation requests isn't always going to give you the freshness guarantees you might want, but it does allow for better, network-independent loading performance.

There's some general guidance about implementing a service worker "kill switch", if you want to opt-out of using them after you've already deployed them.

Given those links with follow-up material, I'm curious whether there are any outstanding questions that need to be tracked in this GitHub issue. If not, we'll close the issue.

This was an implementation error on my part. It looks like giving 0 maximum age would've fixed the issue if I had it from the start, along with the no-op SW... I'll look into those resources @jeffposnick and take your suggestions @piehei. I will also post these types of questions on SO from now on. Thanks for all of the resources guys! Greatly appreciated.

Was this page helpful?
0 / 5 - 0 ratings