问题标签 [workbox-window]

我正在尝试实现工作箱以在网站上预缓存图像和视频资产。

我创建了一个服务工作者文件。它似乎在我的应用程序中被成功引用和使用。服务人员：

该应用程序使用 workbox-window 来加载、引用和消息服务工作者。该应用程序如下所示：

这个项目使用 vue 和 vue-cli。它有一个 webpack 配置，允许将插件发送到 webpack。配置看起来像：

我可以看到消息已成功发送到服务人员并包含正确的有效负载。但是，这些资产永远不会出现在 Chrome 开发工具缓存存储中。我也从未看到任何与通过 messageSW 发送的资产相关的工作箱日志记录。我还通过禁用我的互联网进行了测试，资产似乎没有加载到缓存中。我在这里做错了什么？

我发现工作箱文档有点不清楚，并且还尝试从服务人员中删除消息事件处理程序。然后，像这样向 service worker 发送消息：

这似乎也对缓存没有影响。

在我的React SSR应用程序中，我实现了服务工作者（通过 Workbox）。它工作正常。每次当我更改一些代码、再次重建、运行服务器、访问浏览器时，我都会看到我的缓存已成功更新。

但有一件事我无法理解。当我从本地服务器中删除某些资产（js 或 css）并尝试在浏览器中执行某些操作（调用该资产）时，我收到一个块错误，表示该文件不可用。

主要问题是，如果该资产已经在缓存存储中，它不应该从该缓存中加载，还是我错过了什么？

我使用的组件是

1. 节点/快递（用于服务器）
2. @loadable/components（用于代码拆分），结合 webpack
3. 谷歌工作箱插件

这只是今天早上才开始发生的，尽管我已经 6 天没有推送更新了。我们的一些 webapp 用户突然收到更新消息，当他们单击更新时，它似乎可以工作，但他们马上又回来了。我正在使用 workbox ^6.1.2 窗口，它已经工作了好几个月：

如果用户单击我的更新按钮，我会这样做：

只要我不推送任何软件更新，我就认为对 wb.update() 的调用不会做任何事情，但截至今天早上，对于 safari 14.1 用户来说，它现在认为每次都有新的更新。

这可能与我没有使用 isExternal 或“externalwaiting”消息正确处理“外部”工作人员有关吗？

我正在使用包含工作箱模块的 Nuxt PWA 模块。我按照 PWA 模块文档中的建议注册了工作箱窗口，以便收听工作箱侦听器事件。

workbox.update() 按预期工作，但侦听器事件会产生以下错误：

关于可能导致此问题的任何建议？

受影响的图书馆： 工作箱窗口

浏览器和平台： 基于铬的浏览器

问题或功能请求描述：我仅在尝试实现工作框窗口时遇到此问题。如果我删除实现，错误就会消失。

我的目标是展示 service worker 版本。为此，我按照文档中的说明进行操作，尽管我可以获得 service worker 版本，但它造成了一些麻烦。

Workbox 文档参考：

https://developers.google.com/web/tools/workbox/modules/workbox-window?hl=es#window_to_service_worker_communication

问题

1. 它在控制台中 显示一个bad-precaching-response错误：参见图片
2. 它会生成多余的服务人员： 参见图片

我再说一遍：一旦我删除了 workbox-window 实现，bad-precaching-response 就会消失，并且它会停止生成多余的服务工作者

软件注册

时钟服务工作者.js（软件文件）

工作箱窗口实现

Worboxactivated事件是一种方式，但我想在此事件之外了解。

是否有某种功能/方法我可以按需调用来检查注册的服务人员是否已安装/活动？像isServiceWorkerActive()或类似的东西？

我只能想到navigator.serviceWorker.controller.state == 'activated'，这是实现这一目标的正确方法吗？