Service Worker 无法使用不同的 scriptURL

如何解决Service Worker 无法使用不同的 scriptURL

我有一个带有 Service Worker 的 React 应用，它运行良好，但有很多报告的 Sentry 问题表明此错误：TypeError: Cannot update a service worker with a requested script URL whose newest worker has a different script URL

这个错误是关于什么的？

注意：它只发生在 Safari

我在错误处理程序上添加了一个 Sentry.captureMessage 以获取更多信息，但它们基本上只是登录：Attempted to update service worker: Active: scriptURL=（空字符串）

这是服务工作者设置：

// sw-setup.ts
import * as Sentry from '@sentry/browser';

if ('serviceWorker' in navigator) {
  const captureMsg = ({
    installing,active,waiting,}: ServiceWorkerRegistration) => {
    let msg = 'Attempted to update service worker: ';
    if (installing) msg += `Installing: scriptURL=${installing.scriptURL}; `;
    if (active) msg += `Active: scriptURL=${active.scriptURL}`;
    if (waiting) msg += `Waiting: scriptURL=${waiting.scriptURL}`;
    Sentry.captureMessage(msg);
  };

  window.addEventListener('load',() => {
    navigator.serviceWorker.register('/sw.js').then(
      registration => {
        registration.addEventListener('updatefound',() => {
          // global var to reload the app on next route navigation if there's a new update
          window.swUpdate = true;
        });
      },async err => {
        Sentry.captureException(err);
        const registration = await navigator.serviceWorker.ready;
        captureMsg(registration);
      }
    );
  });

  // Check for update every 2 minutes
  setInterval(() => {
    navigator.serviceWorker.ready
      .then(registration => registration.update())
      .catch(async err => {
        Sentry.captureException(err);
        const registration = await navigator.serviceWorker.ready;
        captureMsg(registration);
      });
  },1000 * 60 * 2);
}

我们在 sw-setup.js

中加载 app.js

// app.js
import './sw-setup';

和 webpack，使用 workBox

// webpack.prod.babel.js
const { GenerateSW } = require('workBox-webpack-plugin');

const plugins = [
  // [...]
  new GenerateSW({
    skipwaiting: true,// force update even if the user don't reload the page
    exclude: [/\.gz$/,'index.ejs',/\.map$/,],maximumFileSizetoCacheInBytes: 4000000,// 4mb
    cleanupOutdatedCaches: true,swDest: 'sw.js',}),// [...]
];

module.exports = require('./webpack.base.babel')({
  // [...]
  output: {
    // Add ".upd" to force SW to update its cache
    filename: '[name].[chunkhash].upd.js',chunkFilename: '[name].[chunkhash].upd.chunk.js',},plugins,// [...]
});