如何检测 Workbox.register 预缓存请求失败？

Question

我通过 Workbox 注册我的 serviceworker

        const wb = new Workbox("/sw.js");

        wb.register();

效果很好，安装没有问题。（我正在使用 workbox-precaching，以及通过 webpack 构建的 SWInjectManifest）

当我故意强制我的预缓存清单中的一个请求失败时，我的问题就来了，我通过删除一个构建的文件来做到这一点。

Workbox 开发日志告诉我

Service worker installation failed. It will be retried automatically during the next navigation.

Uncaught (in promise) bad-precaching-response: The precaching request for 'http://localhost:8080/GalanoGrotesqueAlt-Regular.woff' failed with an HTTP status of 404.

理想情况下，我想让用户重试。我构建的应用程序在低质量网络环境中使用，因此检测这些错误非常重要。

我试过：

在 try catch 中包装 wb.register()（它不会引发异常）
将 .catch() 链接到 wb.register()（这不是 return 承诺）
监听 Workbox 上不存在的 'error' 事件（它们不存在）
在服务工作者中包装对 precacheAndRoute 的调用（它不会引发异常）
监听 ServiceWorkerController 上的 'error' 事件（即 unsupported ）
设置 self.onerror，并在 serviceworker 代码中监听自身 error 事件（它们不会触发）

https://plnkr.co/edit/jymNXaeLvsZU1OJx?preview

我现在的两个选择是：

尝试使用 webpack 别名覆盖工作箱记录器代码
只需在预估时间后提供重试按钮

我喜欢工作箱给我的插件，但抽象开始受到伤害。

Answer 1

在您描述的场景中，执行预缓存时出现错误，注册成功，但安装过程失败。

发生这种情况时，与注册关联的 ServiceWorker 对象将从 installing 状态转换为终端错误状态，即 redundant.

您可以使用 workbox-window 侦听 redundant state change 事件来检测此故障：

wb.addEventListener('redundant', (event) => {
  // Handle installation failure here.
});

如何检测 Workbox.register 预缓存请求失败？

How do I detect Workbox.register precache request failure?

workbox