One option is just to use a the service worker’s cache as a fallback, and always attempt to go network-first via a fetch()
. You lose some performance gains that a cache-first strategy offers, though.
An alternative approach would be to use sw-precache
to generate your service worker script as part of your site’s build process.
The service worker that it generates will use a hash of the file’s contents to detect changes, and automatically update the cache when a new version is deployed. It will also use a cache-busting URL query parameter to ensure that you don’t accidentally populate your service worker cache with an out-of-date version from the HTTP cache.
In practice, you’ll end up with a service worker that uses a performance-friendly cache-first strategy, but the cache will get updated “in the background” after the page loads so that the next time it’s visited, everything is fresh. If you want, it’s possible to display a message to the user letting them know that there’s updated content available and prompting them to reload.