Skip to main content

Auto-update PWA created in vue.js with quasar without client confirmation

· One min read
Hreniuc Cristian-Alexandru

If you have a PWA, you might want to make sure that the client is using the latest version of it. Here are the steps needed to do this using quasar framework:

1. Make sure that the service-worker.js is not cached by nginx

Add this configuration in your nginx:

location ~ service-worker.js$ {
#add_header X-debug-whats-going-on 3;
add_header Cache-Control "no-cache, no-store";
expires -1;
try_files $uri $uri/ =404;
#/service-worker.js; ->

2. Add skipWaiting and clientsClaim in workboxOptions node, from pwa in quasar.conf.js

pwa: {
workboxPluginMode: "GenerateSW", // 'GenerateSW' or 'InjectManifest'
workboxOptions: {
skipWaiting: true,
clientsClaim: true


3. Call location.reload() inside updated() method from src-pwa/register-service-worker.js

  updated (/* registration */) {
console.log("New content is available; please refresh.")

Source1, source2