pwa: Service worker not updating without force update
Hi,
I installed Vue PWA template and tested on Apache localhost with offline feature (Dev tool). It works as expected. I deployed same code to the production environment on Heroku. where it is not working as expected. Even when I reload the page old service worker is still running and cached version of app which I get in offline mode is stale. When I force update the service worker (From dev tool) then newer version of service worker is installed and only then it fetches fresh copy of project.
Here’s my production webpack config.
new SWPrecacheWebpackPlugin({
cacheId: 'my-vue-app',
filename: 'service-worker.js',
staticFileGlobs: ['dist/**/*.{js,html,css}'],
minify: true,
stripPrefix: 'dist/',
mergeStaticsConfig: true, // if you don't set this to true, you won't see any webpack-emitted assets in your serviceworker config
staticFileGlobsIgnorePatterns: [/\.map$/], // use this to ignore sourcemap files
})
I have not changed service worker code in index.html
Is there anything I am missing?
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 10
- Comments: 32 (3 by maintainers)
Commits related to this issue
- Merge pull request #115 from ahus1/cache_limit add section why cache limitation is necessary with examples #70 — committed to vuejs-templates/pwa by jeffposnick 7 years ago
particularly works exluding service-worker.js from cache
in this case I still have to clear browser cache and updates are available after second page reload.
Your problem is the caching header of the server for the service worker file. You need to set up your web server so the caching headers are set to 0. Currently your settings are: Cache-Control:max-age=31536000.
@kgrosvenor
service-worker only works in https mode.
@dvikas Yes, I changed to this and worked:
I need to enable mod_headers in apache only, restart and enjoy 😃
If running express you can create a
nocache
middleware and apply it to where you send yourindex.html
Just a heads up, if piping through cloudflare you need to toggle on respect existing headers under caching.
@rof20004 Yeah I know I’ll attach my nginx-configuration at the end of this post, but what I mean is that it sucks finding out about the worker-loader design of this template through github issues, this information should be made available on the front-page, as it is now we’ve gone live in production for 2 months and I have no clue how many customers got infected with an outdated service-worker or how to purge their cache-stores short of changing domain.
So yeah a heads-up that tells people to take extra care with the cache-settings in production would have been really appreciated back then. I will even go as far as stating that this issue is unresolved until a “PWA in production environment” chapter is available in the
Readme.md
. Alternatively information on how to entirely remove/disable the service worker for your project. Undocumented features are as bad as bugs.Here’s my nginx tweak to achieve the same results:
Please refer to Caching best practices & max-age gotchas - JakeArchibald.com It might be helpful to get you more understand about that.
@pushkardeshmukh1992 It seems that the issue isn’t involve to this pwa template directly. how about that close the issue?
@aleksandrmelnyk Hi,
I have this in my .htaccess(vue-router history mode for apache):
How can I integrate this code that you shared inside the same .htaccess, I tried this but not worked.
Here is one for apache2:
I used jakearchibald tips, for max-age: 0 to service-worker.js and works perfectly, when I update my code, the final user only needs to refresh the page, service-worker.js will do the job to cache all updates.
@pushkardeshmukh1992 Please follow below steps to debug the issue you are facing
build
folder.Line 33
: Putconsole.log('new service worker installed')
before break statement.Line 40
andLine 44
: placeconsole.log()
with appropriate messages.Thanks.