问题标签 [workbox]

我有非常简单的workbox 3.2配置如下：

Workbox 正确拾取路线：

但响应总是 200 并带有警告

检查网络选项卡显示 Service Worker 未能返回文档：

上面的“失败”文本有ERR_CONNECTION_RESET工具提示。

路线没有错误/en（它在生产中运行了几个月），如果该路线没有注册到服务工作者（通过删除上面的代码片段），也不会发生任何问题。我也尝试将缓存策略更改为networkFirst.

同样sw.js，我也有预缓存路由（workbox.precaching），它们都可以正常工作（可以由 SW 缓存和服务）

这可能有什么问题？以及如何解决？ /en是带有服务器渲染的 React 页面，由 NodeJS 提供服务。

我使用的是 Workbox v2，现在升级到 v3。我使用 Webpack 生成它。

我已经开始使用 GenerateSW，并将旧配置的一部分移到新配置中，更改 v3 所需的位置。

我遇到了一个错误，templatedUrls似乎与 v2 中的工作方式不同。

网络包配置：

错误：

如果我使用字符串而不是数组，它可以正常工作，但这显然是用于手动版本控制而不是文件路径数组，这是我在这里尝试做的。

此外，即使将其更改为我的 index.php 文件也会产生同样的问题：

最后，如果我globDirectory: 'public',在它之前添加，它似乎可以工作，并且希望我的 URL 基于该公共目录 ( ../resources...)。但是，它给了我这个警告：

文档中似乎没有提到此密钥是必需的。

任何建议将不胜感激！

我正在将我的网站更新为 PWA，并且我正在使用 google 工作箱作为服务工作者来缓存数据。我可以缓存 JS、图像 css 等，但我不能缓存 back4app 查询数据。

我尝试使用workbox.backgroundSync，但是当我签入时IndexDB，它什么也不缓存。这是我的代码：

1）是否可以使用缓存 back4app 数据workbox？

2）如果可能的话，我该怎么做？你能给我一个代码的例子吗？我已经尝试了两天，但没有成功。谢谢。

我们已经使我们的网站 ( https://www.hijup.com ) PWA 准备好添加到 HomeScreen 功能。该应用程序可以通过 Internet 连接从 HomeScreen 启动。但是当连接关闭时，会出现如下对话框：

“第一次使用[my_app_name]，请连接到互联网”

为什么它仍然需要互联网连接？所有的 JS & CSS 已经被预缓存（使用workbox.precaching）并且start_url已经被networkFirst策略缓存了。此外，这不是我第一次启动该应用程序（正如对话消息所暗示的那样）。

所以我在读这个：

https://developers.google.com/web/tools/workbox/guides/precache-files/

它说：

在示例中，它描述了 service worker 将下载 3 个文件，这是指定的 3 个文件。

鉴于我正在使用 webpack 插件，并且我的 precache-manifest 文件包含我捆绑的所有.js 文件，这是否意味着当我第一次访问该网站时，我几乎下载了所有内容？（这不会使 Workbox 的实现对 PWA 毫无用处吗？）

拥有一个需要使用版本控制跟踪所有 .js 文件的文件有什么意义？

我还检查了控制台，在网络选项卡中，浏览器似乎没有下载所有内容，所以我不确定应用程序之间的链接（或缺少链接）只加载它需要的内容，清单文件有引用几乎所有东西。

大家好，我是 Workbox 的新手，我一直在使用 CLI 生成带有预缓存的 SW，我有两个 html 文件 index 和 restaurant_details 我的问题是，当我离线访问包含所有餐厅评论的索引页面时我有，我可以点击查看详细信息，现在该页面运行良好，所有缓存的文件都运行良好，但是当我尝试查看我已经访问过并且缓存了自己的文件的餐厅的详细信息时，SW 完全消失了它与它一起缓存。

奇怪的是，如果我拔掉我的以太网电缆，看看餐厅的详细信息是否正常工作并且软件保持打开状态并且缓存文件被检索并且一切正常，有人可以向我解释为什么会发生这种情况以及发生了什么我可以修复它。

当应用程序在线时，事情似乎工作正常，我可以在页面之间导航，文件似乎被正确缓存。但是当我使浏览器脱机时，应用程序不会加载。

我收到此错误：

在控制台中，我收到此错误：

我认为最后一行是罪魁祸首，不知何故它没有加载预缓存清单文件：

预缓存清单文件出现在控制台的 Sources -> Network 选项卡下的 sw.js 文件类别下，同时在线。所以我假设当应用程序脱机时，这个文件没有被缓存或保存。我已经按照 webpack 教程进行操作，但似乎没有找到任何告诉precache-manifest要存储文件的内容。该文件甚至没有出现在应用程序选项卡（控制台）-> 缓存-> 缓存存储-> my-app-runtime（或预缓存版本）中

语境

我有一个使用 webpack、vueJS 和 Workbox 的 SPA。在服务人员中，我有以下几行（）：

问题

首次构建应用程序时，该app.js文件现在被命名app.xxxxxxxx.js（例如）。因此，当客户端使用 service worker 时，它会预先缓存index.html包含以下行的文件：

<script type=text/javascript src=/js/app.xxxxxxxx.js></script>

当我更新应用程序并重建它时，该app.js文件将被命名app.yyyyyyyy.js，但客户端仍然index.html使用旧app.xxxxxxxx.js文件缓存该文件，因此该应用程序将无法工作（显然......）

预期行为

服务工作者似乎index.html使用 CacheFirst 策略获取预缓存文件。我想如果它使用 NetworkFirst 策略它会起作用。

有可能吗？

- 编辑 -

我忘了精确：每个.js文件都使用 NetworkFirst 策略进行缓存：

在尝试注册我的服务人员时，我m trying to figure out how I can combine my react app with workbox as my serviceworker. No matter what I总是遇到同样的错误。

Uncaught (in promise) DOMException: Failed to register a ServiceWorker: 该脚本具有不受支持的 MIME 类型 ('text/html')。

在我做了一些研究之后，大多数解决方案都证明它是由开发环境引起的。这是真的？如果是这样，我如何在开发环境中注册服务工作者，尤其是工作箱。

我的 index.js 中的代码片段

我的 sw.js 只包含一个简单的 console.log

带有工作箱的新手，我正在尝试缓存 wordpress 网站的首页 [或所有页面] 以符合灯塔 PWA 审核失败：

离线时不响应 200 如果您正在构建渐进式 Web 应用程序，请考虑使用服务工作者，以便您的应用程序可以离线工作。学到更多。

我做了功能：

对应的 sw.js 文件为：

serviceWorker 已正确注册，但缓存未按预期工作。

有什么建议么？还是需要更多信息？