General-question: Service-Worker results to old CSS when updating.

[pmochine]

Sorry, I don't know really where to ask this question except for here.

When I upload a new build to my server, and I visit for example https://example.com/imprint, the result is that the CSS is missing, since the CSS file got a newly generated hash name but the service-worker returns the old HTML build with the old CSS hash name.

The only solution is to refresh with "shift+cmd+4", to delete all cache and to restart the service worker. Obviously, this is not what normal users would do.

How can I fix this? Any idea? 🙈

Here is a short gif for you to see the problem in action

At the very last second, I'm hard-refreshing the page and only then I see the correct imprint page.

[rishabh3112]

You may want to update to latest version of the plugin. Issue is resolved and my site https://rishabhchawla.now.sh/ uses latest and don't face such issues anymore.

[pmochine]

@rishabh3112 weird! I still struggle with this issue. Even though I have the latest version of the plugin (0.0.17). At first, I thought it might be an issue with Nginx, caching the HTML file, but no it's set to no-cache for HTML files.

[pmochine]

Ok I resolved the bug. Under Application go to "Clear storaage" and clear the whole site. Only then it works!

[pmochine]

Update: Unfortunately, the problem is back and I'm not even sure what's wrong :(

[dikaio]

@pmochine if you server allows you to do so you should try disabling cache for your service-workers.js files. I believe that should fix your issues. The following can be used:

If using nginx

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

If using apache (I haven't personally tested) but obtained from gridsome-plugin-service-worker docs

<Files /service-worker.js>
  FileETag None
  <ifModule mod_headers.c>
     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"
  </ifModule>
</Files>

<Files /assets/js/service-worker.js>
  FileETag None
  <ifModule mod_headers.c>
     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"
  </ifModule>
</Files>

[pmochine]

@dikaio Thank you for your time and your comment. I appreciate it.

Here is my nginx setting. But this should be fine as well right?

#Disable cache in service-worker
location = /service-worker.js {
    add_header Cache-Control "public, max-age=0, must-revalidate";
}