How to clear cache with vue-cli pwa w/ service-worker + nginx

Ok I am losing my mind on this one… it has plagued me for so long and still can’t figure out how to properly enable cache but also display new content after a git push without requiring a manual hard reload/manual cache clear

I’m using vue-cli 3.7 with the pwa preset

This is my nginx vhost.conf (running inside docker)

server {
    listen       80;
    server_name  localhost;
    root   /usr/share/nginx/html;

    location / {
      try_files $uri $uri/ /index.html;
    }

    location ~ (index.html|service-worker.js)$ {
      add_header Last-Modified $date_gmt;
      add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
      if_modified_since off;
      expires off;
      etag off;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

This basically says “don’t ever cache the index.html and service-worker.js”

When I push new code with this nginx config in place, it says in the console New content is available; please refresh. But no matter how much I refresh the page it doesn’t show me the new code!! Only a manual hard reload makes or manual application data clear makes the new code appear… how annoying!

Someone suggested to add window.location.reload(true); underneath the console.log in the registerServiceWorker.js file, however that sends the browser into an infinite reload loop. It does not work as far as performing a hard reload (in Chrome Desktop anyway it doesn’t work at all)

I found this piece of code that if I add under the console.log above inside registerServiceWorker.js, then the new code will be visible after refreshing

      caches.keys().then(cacheNames => {
        cacheNames.forEach(cacheName => {
          caches.delete(cacheName);
        });
      });

So it will look like this

    updated() {
      console.log('New content is available; please refresh.');
      caches.keys().then(cacheNames => {
        cacheNames.forEach(cacheName => {
          caches.delete(cacheName);
        });
      });
    },

However, after refreshing the code (manually), it STILL says ‘New content is available; please refresh.’, and again and again if I reload some more… so it always goes back inside the updated(). This essentially disables the service-worker cache completely (as evidenced by the network tab showing that every asset is being re-dowloaded upon every reload. That is until you do a manual hard reload. Adding a window.location.reload(true); under does not help and again sends into an infinite reload loop

The ideal configuration would be one that upon detecting new code has been pushed, performs an automatic reload and shows the new code! But at this point I will settle with anything working

Help would be greatly appreciated! Thank you

1 Like

Did you find solution on this?

This is something I am currently having quite a bit of difficulty with, but an interim solution that works very well and I can at least depend on is making minor package version updates… 0.4.1…0.4.2, with each change rerun build - and my cache issues go away.

It makes sense for me logically, at least for now, since every update is a new small version and it saved me from crippling my workflow, but I am working up the courage to properly take on the caching beast

Have the same problem… How to clear cache without hard reload?