PWA – Frontend doesn’t update even after a hard refresh

• Below is the configuration of our nuxt and nuxt-pwa configuration.
• Nuxt pwa is recognising a new version available and we prompt user to do a hard refresh/reload.
• And on reload – new UI also starts to work.
• However, if we open the site in a new tab. A spinner gets shown & the latest frontend fails to load. And again, a hard refresh is required.
  • our frontend redirects to /dashboard on visiting localhost:8080 by default and this is getting loaded from serviceworker with cached data.
  • Please help us resolve this since this has been a critical issue for us.

Spinner seen on new tab opening :

export default {
  ssr: false,
  target: 'static',
  head: {
    titleTemplate: '',
    title: 'NocoDB',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: './favicon-32.png' }
    ]
  },
  plugins: [
    // plugins
  ],
  buildModules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/pwa'
  ],
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    'vue-github-buttons/nuxt',
    '@nuxtjs/toast'
  ],
  axios: {
    baseURL: process.env.NC_BACKEND_URL || (process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080')
  },
  router: {
    mode: 'hash',
    base: process.env.NODE_ENV === 'production' ? './' : '',
    middleware: ['auth']
  },
  vuetify: {
    defaultAssets: {
      icons: false
    },
    optionsPath: '@/config/vuetify.options.js',
    treeShake: true,
    customVariables: ['./config/variables.scss']
  },
  build: {
    parallel: true,
    plugins: [
      new MonacoEditorWebpackPlugin({
        languages: ['sql', 'json', 'javascript'],
        features: ['!gotoSymbol']
      })
    ],
    extend(config, { isDev, isClient }) {
      if (isDev) {
        config.devtool = isClient ? 'source-map' : 'inline-source-map'
      }

      config.externals = config.externals || {}
      config.externals['@microsoft/typescript-etw'] = 'FakeModule'
      return config
    }
  },
  pwa: {
    workbox: {
      assetsURLPattern: //_nuxt//,
      config: { debug: true }
    },

    icon: { 
      publicPath: './' 
    },
    manifest: {
      name: 'NocoDB',
      start_url: '../?standalone=true',
      theme_color: '#ffffff'
    }
  }
}

Lighthouse report :

Github issue reference : https://github.com/nuxt-community/pwa-module/issues/501