Caching and versioning issue.

[ncamaa]

Summary

I'm working with a simple, yet troublesome issue that I believe others may have encountered and resolved before. So far, all solutions I've come across online, including those on this forum, haven't quite hit the mark.

Environment Details

• Quasar version: 1.16
• Server: Netlify

The Issue

I'm aiming to ensure that users always have access to the latest version of the app. By employing register hooks from import { register } from 'register-service-worker', I've been able to use my service worker file, src-pwa/register-service-worker.js, to detect when a new version is available. After the new version is downloaded and cached, a prompt to refresh is issued to the user.

However, the issue arises in executing a successful hard refresh. Despite my efforts, I've found that upon refresh, the same version is reloaded. This triggers the new version prompt again, and results in an undesirable loop.

The Reload Logic

Here's the hardReload() function inside my service worker file:

function hardReload() {
  const url = new URL(window.location.href)
  url.searchParams.set('nocache', new Date().getTime())
  window.location.href = url.href

  // I also attempted using location.reload() and location.reload(true).
  // The latter seems to work on desktop browsers but not on mobile browsers.
}

The complete service worker file is accessible here: Service Worker File

PWA Settings

Below are the PWA settings within my quasar.conf.js file:

pwa: {
  workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
  workboxOptions: {
    skipWaiting: true,
    clientsClaim: true,
    // Exclude the following files from the precache manifest: netlify.toml
    exclude: [/\.map$/, /manifest\.json$/, /_redirects$/, /netlify.toml$/]
  },
}

You can find the full settings here: PWA Settings

Netlify Settings

Lastly, here are the settings in my public/netlify.toml: Netlify Settings

The Goal

Ultimately, I'm seeking a solution where each time a new version is deployed, the service worker recognizes it, and offers the client the opportunity to load (and successfully loads) this new version.