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
Browse to the app for the first
I should seeContent is now available offline!
in the consoleReload the page
The message in the console should not appear again because the service worker is installed, but the page should still work.Go offline and reload the page
The page should still workMake a visible change to the source code
Rebuild (run the build task and
sw-precache
)
This is where my understanding must be wrong
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
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!
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.