PWA - 强制刷新后，前端仍未更新

Question

下面是我们的nuxt和nuxt-pwa配置。 Nuxt pwa已识别到新版本可用，我们提示用户进行硬刷新/重新加载。

重新加载后，新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'
    }
  }
}

Lighthouse 报告：

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

- Pranav C Balan

Answer 1

您需要设置一个服务工作者，根据版本清除缓存。 按照以下方式设置service-worker.js，并在部署更改时更新LATEST_VERSION。

// 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, {})

- Dipten

---

服务工作者是由nuxt/pwa库生成的，因此我需要实现一个自定义服务工作者或进行一些配置更改。我会解决的，谢谢分享。 - Pranav C Balan

你需要修改由nuxt/pwa生成的同一个service worker。 考虑将上述更改添加到您现有的service worker中。 - Dipten

我们会尝试并确认它是否有效，但每次手动修改并不是我们理想的解决方案。 - Pranav C Balan

Answer 2

不知道对于nuxt而言如何，但是对于angular来说，我们需要在每次部署时提高ngsw-config.json中的version元素（1、2、3等），并且在启动时调用SwUpdate.checkForUpdate()。只有这样，应用程序的新版本才能从服务器检索到。

- Pieterjan