I'm using Google's SW Precache to generate the serviceworker for an Angular (currently v.4) app hosted on firebase. I'm using Angular cli to generate my distributed files. When it comes time to deploy my app, 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 sw-precache-config.js
file 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'm doing wrong in my process or configuration that is not allowing the latest index.html to be loaded?