Clear cache on deployment of new version

[reathh]

Hello!

First I would like to thank the creator of Quasar and all of the community for the excellent framework. It has saved me tons of hours and I’ve had lots of fun programming with it.

I have the following problem:

My app is SPA PWA SSR. The problem is that when I deploy a new version my visitors see the old version until they refresh a couple of times. Sometimes it updates on one refresh, sometimes it takes a couple of refreshes, I guess browsers have some sort of a mechanism where if you refresh enough times it triggers a hard refresh.

My question is how can I ensure that my visitors always get the most up-to date version of my app?

[metalsadman]

https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker#important-hosting-configuration , other info in the same pwa docs or try to search for pwa keyword down here.

[reathh]

Thanks for your reply!

After I build my app I am creating a docker image with the following Dockerfile

FROM --platform=linux/amd64 node:lts-alpine
RUN npm install pm2@latest -g
WORKDIR /app
COPY . .
EXPOSE 3000
RUN npm i
CMD ["npm", "run", "start" ]

I run a Docker container which is served from Nginx. Should I configure Nginx to not cache sw.js, or should I configure the SSR server to not cache, or both?

[Stjefan]

Automatically refreshing the PWA code in the browser or in its app variants is a bit tricky. Prior to automating this refresh (described below in this post), our app needed a manual refresh in the browser, sometimes up to 4 times, until a newly deployed version of the PWA became active in the browser or the app.

Our solution for the automated PWA refresh (after the user confirms the refresh) is this:

1. In our backend code, we send a version string which specifies the latest build of our Quasar frontend, as a header field, in every response to the frontend code. If your backend is based on Node/JS, you can add this header in your Express routes file, through a call of res.setHeader("front-end-build", "v1111"). The build string in this example is hard-coded - in production code you should pick this build string from a file, which needs to be updated with the correct build information as part of your build process (usually prior to or after running your frontend build).
2. In our Quasar PWA frontend code, in axios.js, we receive this header and the included information about the latest build, in an Axios response handler, with every response. This response handler code compares the "current build" (kept as a field "build" in package.json of our frontend code, which is updated by a pre-build script prior to every frontend build) with this "latest build" field sent in every response. If the result of this comparison says that the current frontend build is below the latest build (means that the frontened code is outdated), this response handler code shows a notification to the user with an action button to refresh the frontend code (through Quasar Notify.create()). If the user confirms the refresh action linked to this action button, the following code is excecuted to trigger the frontend code refresh:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.getRegistrations().then(async function (registrations) {
    console.log("registrations: ", registrations); // In production, results in an array: [ServiceWorkerRegistration]
    for (let registration of registrations) {
      const promise = await registration.update(); // Update the service worker
      // See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update 
      console.log("promise: ", promise)
    }
  });
}
window.location.reload(true); // Reloads frontend code with new version of code

Sometimes this notification is shown more than once. Confirming the refresh action (once or twice) refreshes the PWA code in the browser (or alternatively, the PWA app).

Hope this helps. Since this build information comes (in our solution) with every response, we have an additional timeout-based mechanism
around the above code, which suppresses these notifications for a couple of minutes, to avoid that a specific user receives more than one refresh notification at a certain time.

Credits for the original solution: https://support.tmssoftware.com/t/pwa-not-auto-updating-our-solution/13886.

Note: Another potential solution is described here: #13176 (comment). I can't remember the details, but for some reason this solution did not work in our case.

[reathh]

@Stjefan Thank you very much for your time and shared code!!

[metalsadman]

what I did is close to Stjefan answer.
Like he said it's very tricky, this was a culmination of similar pwa threads in the past and to not cache the service worker, and have the app's version coming from package.json (see his point #2) exposed in quasar.conf.js>build>env.APP_VERSION, then use it in register-service-worker.js (this was webpack and old version I don't know what file it is now), I'm using InjectManifest.

// register-service-worker.js
import { register } from 'register-service-worker'
import { Notify } from 'quasar'

const appVersion = process.env.APP_VERSION
console.log('%c[APP-VERSION]: ' + appVersion, 'color: #654ef2; font-weight: bold; font-size: 16px;')

register(process.env.SERVICE_WORKER_FILE, {
  ...
  cached (/* registration */) {
    console.log('Content has been cached for offline use.')
  },
  updatefound (/* registration */) {
    console.log('New content is downloading.')
    Notify.create({
      type: 'info',
      progress: true,
      message: 'New content is downloading, please refresh the page when it\'s done.',
      position: 'bottom',
      multiline: true,
      timeout: 2000
    })
  },
  updated (/* registration */) {
    console.log('New content is available; please refresh.')
    // force
    Notify.create({
      type: 'warning',
      progress: true,
      message: 'New content is available. Please click on \'Ok\' to apply changes, or \'Cancel\' and refresh the page yourself later.',
      position: 'bottom',
      multiline: true,
      actions: [
        { label: 'Cancel', color: 'white', handler: () => { /**/ } },
        {
          label: 'Ok',
          color: 'white',
          handler: () => {
            // localStorage.clear()
            location.reload()
          }
        }
      ],
      timeout: 0
    })
  },
  ...
})

// custom-service-worker.js
import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { NetworkFirst } from 'workbox-strategies'

precacheAndRoute(self.__WB_MANIFEST)
self.skipWaiting()
registerRoute(({ url }) => url.pathname.startsWith('/'), new NetworkFirst(), 'GET')
registerRoute(({ url }) => url.pathname.startsWith(/^http/), new NetworkFirst(), 'GET')
self.addEventListener('activate', function (event) {
  console.log('customSw -> @activate :: ', event)
  event.waitUntil(self.clients.claim())
})