My app is written in Reac / Redux and uses Workbox to generate my service worker.
This works - I can confirm revision is updated in the generated service worker when running "workbox inject:manifest".
However, I have noticed clients are not updating the cache after a new release, new code will only load after several refreshes. For each release I have confirmed that the revision is updated.
The things I have tried so far to force the browser to clear the cache after a new release are:
- Implemented skipWaiting() in my ServiceWorker - shows update alert correctly
- Added cache headers to disable caching of the serviceWorker.js and css files (see below)
- Added [contenthash] to all my bundle files in Webpack and updated index.html accordingly for each release
Cache headers
<IfModule mod_headers.c>
Header unset ETag
<IfModule mod_alias.c>
# disable browser cache for serviceWorker.js file
<FilesMatch "^(serviceWorker.js)$">
Header unset Expires
Header set Cache-Control "max-age=0"
</FilesMatch>
<FilesMatch ".(js|css)$">
# cache for 24 hours = 86400 seconds
Header set Cache-Control "max-age=86400, public, no-transform, must-revalidate"
</FilesMatch>
</IfModule>
</IfModule>
index.html
...
<body style="overflow: hidden">
<div id="app"></div>
<script src="/dist/main.bundle.aae6d2bb162cbee13899.js"></script>
<script src="/dist/0.bundle.aaa837f16bb646266d99.js"></script>
<script src="/dist/1.bundle.aa653fe9abbe232be599.js"></script>
<script src="/dist/2.bundle.aa3096daabb2d428a899.js"></script>
<script src="/dist/3.bundle.aa1650fc5bb4e1f1ea99.js"></script>
<script src="/dist/4.bundle.aae80e50cbb06d5e5599.js"></script>
<script src="/dist/5.bundle.aa1824b9ebb0cb931b99.js"></script>
<noscript>
Sorry, this page requires javascript!
</noscript>
</body>
</html>
Despite all these solutions the app still caches in all tested browsers (FF, Chrome, Safari) and in the PWA. The cache will only refresh after one or more reloads and/or hard reload.
I have also verified that the bundle file hash have changed for updated code between releases.
Example of old file before code update and deploy
5.bundle.aa1824b9ebb0cb931b99.js
Example of new file after code update and deploy
5.bundle.cae6d2bb162cbee138bc.js
The reference in index.html to the bundle file is updated with the new hash, but the browser still tries to fetch the old file - resulting in fatal error "ChunkLoadError: Loading chunk [n.oldHash] failed.".
Am I doing this wrong? Is there any other way to force the browser (and PWA) to refresh all code after a new release?
Kind regards /K
