如何向next-pwa重新注册服务人员

Question

我将next-pwa包与我的next.js应用程序一起用于PWA特性。但我在这里有个问题。每次我重新构建和重新部署应用程序时，它都不会重新注册服务工作者，因此我无法获得更新的数据。我必须手动注销服务工作者并清除铬缓存以获得更新的数据。我怎么才能解决这个问题？下面是我在next.config.js文件中的PWA配置

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

/** @type {import('next').NextConfig} */
module.exports = withPWA({
  reactStrictMode: true,
  images: {
    domains: ['i.ibb.co'],
  },
  eslint: {
    dirs: ['src'],
  },
  // pwa configuration
  pwa: {
    dest: 'public/pwa',
    disable: process.env.NODE_ENV === 'development',
    runtimeCaching,
    buildExcludes: [
      /chunks\/images\/.*$/, // Don't precache files under .next/static/chunks/images this improves next-optimized-images behaviour
      /chunks\/pages\/api\/.*/, // Dont cache the API it needs fresh serverinfo
    ],
    exclude: [
      /\.map$/, // dont cache map files
      /^.*ts.*$/, // Dont let serviceworker touch the TS streams
      /-manifest.json$/, // exclude those pesky json files in _next root but still serve the ones we need from /_next/static
    ],
    skipWaiting: true, // installs new SW when available without a prompt, we only need to send a reload request to user.
    dynamicStartUrl: false, // recommend: set to false if your start url always returns same HTML document, then start url will be precached, this will help to speed up first load.
    reloadOnOnline: false, // Prevents reloads on offline/online switch
    sourcemap: false,
  },
})

Answer 1

一旦注册了具有给定URL和作用域的服务工作人员，就不需要多次重新注册它。即使您不再在给定的浏览器中调用navigator.serviceWorker.register()，以前的注册也将保持活动状态。

Workbox文档提供了一个部分，详细说明了浏览器如何检查服务工作人员的更新，以及如何与不同的工作框配置交互。

由于您使用的是skipWaiting: true配置选项，所以在您的web应用程序中已经有了服务工作人员时，在导航到页面之后，缓存条目将被自动交换出来，您在服务工作人员范围内对新页面的下一次导航将使用新的资源完成。请注意，skipWaiting: true意味着此缓存交换将在安装更新的服务工作人员之后立即发生，如果您(例如懒散负载资产 )，对于现有的开放客户端来说，这可能有点不可预测。

关于如何通过使用具体指导并手动触发更新来控制缓存资源的更新(例如，用户选择加入)，您可以使用skipWaiting: false。next-pwa可能有也可能没有帮助这个更新流程的组件--我不太熟悉它提供的内容。