javascript - PWA - 即使在硬刷新后前端也不会更新

Question

下面是 our nuxt and nuxt-pwa的配置配置。

Nuxt pwa is recognising a new version available我们提示用户进行硬刷新/重新加载。

并且在重新加载时 - 新的 UI 也开始工作。

但是，如果我们在新选项卡中打开该站点。显示微调器并且无法加载最新的前端。再次，需要硬刷新。

默认情况下，我们的前端在访问 localhost:8080 时重定向到/dashboard，这是从带有缓存数据的 serviceworker 加载的。

请帮助我们解决这个问题，因为这对我们来说是一个关键问题。

在新标签打开时看到的微调器:

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'
    }
  }
}

灯塔报告:

Github 问题引用: https://github.com/nuxt-community/pwa-module/issues/501

Answer 1

您需要设置根据版本清除缓存的服务 worker 。
如下设置 service-worker.js。并更新 最新版本关于您部署的更改。

// service-worker.js
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

workbox.core.setCacheNameDetails({ prefix: 'pwa' })
//Change this value every time before you build to update cache
const LATEST_VERSION = 'v1.0.1'

self.addEventListener('activate', (event) => {
  console.log(`%c ${LATEST_VERSION} `, 'background: #ddd; color: #0000ff')
  if (caches) {
    caches.keys().then((arr) => {
      arr.forEach((key) => {
        if (key.indexOf('pwa-precache') < -1) {
          caches.delete(key).then(() => console.log(`%c Cleared ${key}`, 'background: #333; color: #ff0000'))
        } else {
          caches.open(key).then((cache) => {
            cache.match('version').then((res) => {
              if (!res) {
                cache.put('version', new Response(LATEST_VERSION, { status: 200, statusText: LATEST_VERSION }))
              } else if (res.statusText !== LATEST_VERSION) {
                caches.delete(key).then(() => console.log(`%c Cleared Cache ${LATEST_VERSION}`, 'background: #333; color: #ff0000'))
              } else console.log(`%c Great you have the latest version ${LATEST_VERSION}`, 'background: #333; color: #00ff00')
            })
          })
        }
      })
    })
  }
})

workbox.core.skipWaiting();
workbox.core.clientsClaim();

self.__precacheManifest = [].concat(self.__precacheManifest || [])
// workbox.precaching.suppressWarnings()
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})