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

【问题标题】：PWA - Frontend doesn't update even after a hard refreshPWA - 即使在硬刷新后前端也不会更新
【发布时间】：2022-01-12 13:09:28
【问题描述】：

下面是 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

【问题讨论】：

标签： javascript vue.js nuxt.js progressive-web-apps service-worker

【解决方案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, {})

【讨论】：

服务工作者是由nuxt/pwa 库生成的，所以我需要实现一个自定义服务工作者或一些配置更改。会解决的，谢谢分享。
你需要修改 nuxt/pwa 生成的同一个 service worker。考虑上述更改以添加到您现有的 Service Worker。
是的，我们将尝试确认它是否有效，但每次手动修改它对我们来说都不是理想的解决方案

【解决方案2】：

不知道 nuxt，但对于 angular，我们需要在每次部署（1、2、3，...）时碰撞 ngsw-config.json 的 version 元素，并在启动时调用 SwUpdate.checkForUpdate()。只有这样，才会从服务器检索应用程序的新版本。

【讨论】：