"New version available" with service worker and sw-precache

Question

I'm trying to use sw-precache, but I must be doing something wrong!

I'm mostly using the demo code available from the github repo and can't seem to get updates to the app to come through. Once it's cached the first time, it never checks for new versions.

I was expecting that when I publish a new service worker, the browser would request the new service worker and update the cache accordingly in the background. Then using the registration code in the example, I would be able to prompt the user to refresh and get the latest version from their newly refreshed cache.

Would really appreciate if someone could please point me in the right direction.

Example

To demonstrate the problem, I've created an isolated example here: https://github.com/stevenocchipinti/sw-precache-demo

The example uses a basic skeleton from create-react-app which has a built in build task which take care of fingerprinting the filenames, etc.

I suspect the problem is with me caching everything by using the following sw-precache config:

{
  "staticFileGlobs": [ "build/**/*.*" ],
  "stripPrefix": "build/"
}

There are more accurate steps in the repo's readme, but the basic steps I'm taking to reproduce the problem are as follows (with my probably incorrect expectations).

Steps and Assumptions

1. Browse to the app for the first
   I should see Content is now available offline! in the console

2. Reload the page
   The message in the console should not appear again because the service worker is installed, but the page should still work.

3. Go offline and reload the page
   The page should still work

4. Make a visible change to the source code

5. Rebuild (run the build task and sw-precache)

This is where my understanding must be wrong

6. Reload the page

   • The service worker should update the cache in the background
   • When its done, you should see New or updated content is available. in the console
   • The actual visible changes should not be visible until the next reload

7. Reload the page again

   • The browser will use the new cache this time around
   • The changes should be visible now!
   • There shouldn't be any messages in the console

The problem

Once the app has been cached initially, it will never update unless you unregister the service worker or force a reload.

I'm not sure how to make this work - any help would be greatly appreciated!

Answer 1

After replicating your development hosting environment, I can see that you're serving your service-worker.js file with a browser HTTP cache lifetime of one hour:

There's more information as to why this is leading to the behavior you're seeing, along with best practices, in this previous answer. As mentioned at the top of that answer, browsers plan on changing their behavior to stop honoring the HTTP cache for the service worker file by default, mainly due to the type of confusion that you're experiencing here. For the time being, though, the production versions of both Chrome and Firefox continue to honor those headers.