Service worker not updating without force update

[pushkardeshmukh1992]

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?

[sushant-j]

@LinusBorg @addyosmani - Any suggestions?

[sushant-j]

Here's a link to video, showing service worker not being updated on page reload.
(It shows service worker #198 installing, but disappears without actually installing it.)

[sandrosc]

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.

The caching headers on the service worker script are respected (up to 24 hours) when fetching updates. We're going to make this opt-in behaviour, as it catches people out. You probably want a max-age of 0 on your service worker script.
from: https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#updates

[devmedoo]

I can reproduce the same issue, the browser simply loads the old version that the service worker installed first time and doesn't get updated.
I tried forcing hash regeneration by commenting the corresponding lines in webpack config, but no luck sadly.
@sandrosc I've tried forcing max-age=0 for files(in httpd.conf) but it doesn't seem to fix the issue for me.

[ragingwind]

Serviceworker should be updated as follow the guide https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#updates, if serviceworker has different content(bytes) and server-side certainly can deliver newer version of servicewoker to client-side.

I recommend that first check out server side always could serve a newer version of service worker by requests in browser because of there are many reason to counteract updates assets like cache-control. and then track the process of installing server worker via self.addEventListener('install') to see what happens in installing process

[pushkardeshmukh1992]

I tried both nginx and apache configuration to unset caching headers. Didn't work as expected.

Then finally decided to go with Vue Template because didn't want to get into caching issues on production.

[anubhav7495]

@pushkardeshmukh1992 Please follow below steps to debug the issue you are facing

1. service-worker-prod.js Find this file in your app directory. It would be inside build folder.
2. Line 33: Put console.log('new service worker installed') before break statement.
3. Line 40 and Line 44: place console.log() with appropriate messages.
4. Do let us know what you get.

Thanks.

[aleksandrmelnyk]

yep, same issue here.
Added console.logs to ervice-worker-prod.js , but nothing appeared in console

Had to manually remove SW cache an d clean cookies.

[aleksandrmelnyk]

particularly works exluding service-worker.js from cache

location = /service-worker.js {
    expires off;
    add_header Cache-Control no-cache;
    access_log off;
}

<filesMatch "service-worker\.js$">
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</filesMatch>

in this case I still have to clear browser cache and updates are available after second page reload.

[pushkardeshmukh1992]

@aleksandrmelnyk I will re-try with this particular nginx config. Thanks!

[ragingwind]

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?