Issues with PWA updates

[phgrund]

Whenever I deploy a new update in my PWA App, I face the same issues

1. User that has cache of a previous version opens the App
2. Gets the update prompt (from updated() method in register-service-worker.js)
3. Page reloads
4. Content is broken and can only be solved after hard reloading
   

client-entry.js:150 [Quasar] boot error: TypeError: $t is not iterable
    at QMenu.js:81:8
vue-router.mjs:3451 TypeError: $t is not iterable
    at QMenu.js:81:8
QMenu.js:81 Uncaught (in promise) TypeError: $t is not iterable
    at QMenu.js:81:8

Here is my quasar.config.js related settings:

    build: {
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
        node: 'node16'
      },
      vueRouterMode: 'history', // available values: 'hash', 'history'
      publicPath: '/',
      env: require('dotenv').config().parsed,
      extendViteConf (viteConf) {
        viteConf.define['process.env.VUE_APP_VERSION'] = JSON.stringify(packageInfo.version) // package.json
        viteConf.build.sourcemap = 'inline'
      },
      useFilenameHashes: false
    },
    pwa: {
      workboxMode: 'generateSW', // or 'generateSW'
      injectPwaMetaTags: true,
      swFilename: 'sw.js',
      manifestFilename: 'manifest.json',
      useCredentialsForManifestTag: false
    }

register-service-worker.js

register(process.env.SERVICE_WORKER_FILE, {
  updated (/* registration */) {
    Notify.create({
      message:
        'Uma nova versão desta aplicação foi detectada. A aplicação será reiniciada para que a atualização tenha efeito.',
      type: 'alert',
      icon: 'update',
      timeout: 5000,
      onDismiss: () => {
        window.location.reload()
      }
    })
  }
})

Any solutions? This issue started after I set useFilenameHashes to false, but, before, I was facing another issue (... because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled)

[DaleMckeown]

Try reloading the localCache in your onDismiss method:

 onDismiss: () => {
    localStorage.clear();
    location.reload();
}

[phgrund]

I can't clear the localStorage since the user would the logged off. But I tried it and no success, clearing the localStorage seem to have no effect

[metalsadman]

checkout #15244

[phgrund]

I tried Stjefan's answer and same results. This is what I got in my console before the page reload

I tried yours too, no success either, same error.

(Every new method I tried, I started in a different port, so it doesn't interfere with previous tries)

[phgrund]

I figured out was the problem was. I had fakerjs as a dev dependency and, even though the only use of it in src was inside a boot only loaded during dev mode, it caused this issue on production build. Deleting this boot file fixed the issue.

// quasar.config.js
module.exports = configure(function (ctx) {
  const bootFiles = [
    'addressbar-color',
    'axios',
    'bugsnag',
    'chartjs',
    'components',
    'notify',
    'props',
    'push-notifications'
  ]
  if (ctx.dev) bootFiles.push('faker')

// boot/faker.js
import { boot } from 'quasar/wrappers'
import { faker } from '@faker-js/faker'

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(async (/* { app, router, ... } */) => {
  faker.setLocale('pt_BR')
})