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

Question

我通过Workbox与注册我的服务工作者

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

        wb.register();

这很好用，并且没有安装任何问题。 （我使用的是工作箱预缓存，并且通过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.

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

我尝试过：

1. 将wb.register()包装在try catch中（它不会引发异常）
2. 将.catch()链接到wb.register()（它不返回承诺）
3. 监听Workbox上不存在的“错误”事件（它们不存在）
4. 在Service Worker中包装对precacheAndRoute的调用（它不会引发异常）
5. 侦听ServiceWorkerController上的“错误”事件（为unsupported]
6. 设置self.onerror，并在serviceworker代码中侦听self error事件（它们不会触发）

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

我现在有两个选择：

1. 尝试使用Webpack别名覆盖工作箱记录器代码
2. 仅在一段等待时间后提供一个重试按钮

[我爱插件工作箱给我，但是抽象开始受到伤害。

Answer 1

在您描述的情况下，执行预缓存时抛出错误，注册成功，但是安装过程失败。

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

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

redundant