Chromium 49下Service Worker注册失败问题求助

问题描述 #

我开发了一个ReactJS Web应用，集成Service Worker用于缓存资源。该Service Worker在Chromium 72上可正常缓存资源，但在Windows XP系统的Chromium 49中无法注册，立即变为冗余状态，提示“Service Worker evaluation failed”。

依赖项 #

dependencies:{
  "webpack": "^5.64.4",
  "workbox-core": "^6.5.3",
  "react": "^17.0.2",
  "babel-loader": "^8.2.3",
  ...
}

报错信息 #

• Uncaught TypeError: cannot read property 'set' of undefined in service-worker.js
• ServiceWorker startup timed out. The worker was in startup phase:Script evaluated.
• Timeout when trying to start the service worker.
• 冗余状态下额外错误：
  • Uncaught TypeError: cannot read property 'set' of undefined in service-worker.js
  • serviceWorker script evaluation failed.

已尝试的解决措施 #

修改webpack.config将目标设为chrome 49和es5，同时调整package.json中的browserslist，但均未解决问题。通过日志追踪，发现错误出现在service-worker.js的clientsClaim()代码行之后，但无法确定具体问题及注册失败的深层原因。

Service Worker代码 #

import {registerRoute} from "workbox-routing";
import {CacheFirst,StaleWhileRevalidate} from "workbox-strategies";
import { BroadcastUpdatePlugin } from "workbox-broadcast-update";
import { setCacheNameDetails, clientsClaim } from "workbox-core";
import { ExpirationPlugin } from "workbox-expiration";
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from "workbox-precaching";
import { CacheableResponsePlugin } from "workbox-cacheable-response";
import * as googleAnalytics from "workbox-google-analytics";

setCacheNameDetails({
  googleAnalytics: "googleAnalytics",
  precache: "install-time",
  prefix: "ITM",
  runtime: "run-time",
  suffix: "v1",
});

const maxEntries = 500;
const maxAgeSeconds = 24 * 60 * 60;
const purgeOnQuotaError = true;

clientsClaim();

cleanupOutdatedCaches();


precacheAndRoute(self.__WB_MANIFEST || [], {
  ignoreURLParametersMatching: [/.*/],
  directoryIndex: null,
  cleanUrls: false,
});

googleAnalytics.initialize();

const fileExtensionRegexp = new RegExp("/[^/?]+\\.[^/]+$");
registerRoute(
  ({ request, url }) => {
    if (request.mode !== "navigate") {
      return false;
    }
    if (url.pathname.startsWith("/_")) {
      return false;
    } 
    if (url.pathname.match(fileExtensionRegexp)) {
      return false;
    } 
    return true;
  },
  createHandlerBoundToURL(process.env.PUBLIC_URL + "/index.html")
);


registerRoute(
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith(".png"),
  new CacheFirst({
    cacheName: "ITM-images",
    plugins: [
      new ExpirationPlugin({
        maxEntries,
      }),
    ],
  })
);

registerRoute(
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith(".ico"),
  new CacheFirst({
    cacheName: "ITM-images",
    plugins: [
      new ExpirationPlugin({
        maxEntries,
      }),
    ],
  })
);

registerRoute(
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith(".json"),
  new CacheFirst({
    cacheName: "ITM-configs",
    plugins: [
      new ExpirationPlugin({
        maxEntries,
        maxAgeSeconds,
        purgeOnQuotaError,
      }),
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new BroadcastUpdatePlugin(),
    ],
  })
);

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

疑问 #

该问题是否与浏览器和Service Worker的兼容性有关？如何解决？

内容的提问来源于stack exchange，提问作者maryam tb