Cache issues busting serviceworker index.html file
I am using Google SW Precache to create a serviceworker for an Angular app (currently v.4) hosted on firebase. I am using Angular cli to build my distributed files. When it comes time to deploy my application, I use the following commands:
ng build --prod --aot #build angular app
sw-precache --config=sw-precache-config.js --verbose # generate precache
firebase deploy # Send to firebase
My file sw-precache-config.js
looks like this:
module.exports = {
staticFileGlobs: [
'dist/**.css',
'dist/**/**.png',
'dist/**/**.svg',
'dist/**.js'
],
stripPrefix: 'dist',
root: 'dist/',
navigateFallback: '/index.html',
runtimeCaching: [
{
urlPattern: /index\.html/,
handler: 'networkFirst'
},
{
urlPattern: /\.js/,
handler: 'cacheFirst'
}, {
urlPattern: /fonts\.googleapis\.com/,
handler: 'fastest'
},
{
default: 'networkFirst'
}
]
};
If I make changes and deploy a new version, I get the cached index.html file even if I refresh or close the browser. I can get the updated index.html file if I add something like ?cachebust=1
to the end of the url. Is there something I am doing wrong in my process or configuration that is preventing the latest index.html from loading?
source to share
As a general best practice, I recommend that you explicitly disable your service-worker.js
HTTP cache disabled file to ensure that changes made to your generated service worker are picked up as expected without having to wait for the HTTP cache copy retention period.
At some point in the future, the default behavior for Chrome and Firefox will be to always fetch the service worker directly from the network, not the HTTP cache, but in the meantime, you can read more about the current behavior .
I have a sample configuration for Firebase deployment that might help:
{
"hosting": {
"public": "build",
"headers": [{
"source" : "/service-worker.js",
"headers" : [{
"key" : "Cache-Control",
"value" : "no-cache"
}]
}]
}
}
source to share