问题标签 [workbox-webpack-plugin]

我在我的 next.js 应用程序中使用 GTM，并且我正在使用 next-offline，它在内部使用 workbox-webpack-plugin 来提供离线支持，使用运行时缓存staleWhileRevalidate策略来缓存 gtm.js 是个好主意吗？

我的应用程序离线工作，它离线保存分析并通过导入此脚本在重新在线时发送它们：

假设第二次访问的用户打开了我的主页，我使用运行时缓存和 networkFirst 策略来缓存 html，所以如果用户在完全离线时再次访问我的主页，他将获得一个完全正常工作的应用程序，尤其是我使用相同的应用程序networkFirst 运行时缓存策略来缓存 api 请求，但是在完全脱机时，获取 gtm.js 的请求将返回 404，并且分析将无法脱机工作，因为 gtm.js 不会初始化获取 analytics.js 的请求，这将是从工作箱缓存提供。我的想法是使用 staleWhileRevalidate 策略来缓存 gtm.js，这样即使用户在离线模式下打开应用程序并且如果他重新上线，这些分析也会被工作箱重新发送。

这是一个好主意吗 ？它会按预期工作还是我缺少什么？

Workbox 不能在 Chrome 上运行，但它可以在其他任何地方运行，这很讽刺，因为我相信这是一个谷歌库，显示的错误是：

铬合金：

歌剧

火狐

我正在使用 workbox-webpack-plugin

webpack.config.js

index.ts（条目）

编辑：这是引发错误的代码行

编辑 2：它实际上适用于 icognito 模式，删除浏览器数据仍然无济于事。

编辑 3：更新到最新的 beta 1 更糟糕，因为除了最后一个错误，它还会显示另一个错误，但是，这个版本也适用于 Chrome 的 icognito 模式和其他浏览器。

我偶然发现了一个我正在努力解决两天的问题，但我无法让它工作。

我正在尝试使用 Google Workbox 插件为服务人员预缓存一些 api 调用。

我的代码如下所示：

它基于此线程中显示的代码：Service worker add files from API call to precache

我可以在检查器中看到这些请求正在触发并存储在workbox-precache-http://localhost:3001/-temp缓存中。但与此缓存平行，我看到workbox-precache-http://localhost:3001/创建了缓存，它是空的。

此外，workbox-precache-http://localhost:3001/-temp我可以看到每个缓存的响应都有Content-Length: 0. 我不知道为什么，但这可能是一个线索。虽然当我查看给定的响应时，我可以在检查器中看到它的全部内容......

当我尝试进行一些应该预先缓存的 api 调用时，它不会使用缓存的响应，而是发出新的请求。在离线模式下，这会导致错误。

我的目标是将这些请求存储在缓存中，以便用户可以离线浏览整个页面。

我究竟做错了什么？

UPD 22.02.2019 https://bugs.chromium.org/p/chromium/issues/detail?id=934386

我正在广泛测试我的缓存服务工作者，有时我确实会收到服务工作者net::ERR_CONNECTION_RESET 200 (OK)提供的 js / css 文件的错误。
我正在使用工作箱 3.6.3

重现步骤：

• 停止服务人员
• 删除所有缓存
• 第一页重新加载 - 我的网页已加载并安装了 service worker
• 第二页重新加载 - 有时我在这里收到一个看起来像这样的错误GET https://dev-host.com/client/build/_/12.js net::ERR_CONNECTION_RESET 200 (OK)

浏览器中会发生什么：

• script我的脚本是通过创建并插入head网页标签的标签加载的。所有这些都是requireEnsure通过 webpack 生成的 manifest.js 脚本中的函数完成的 - https://gist.github.com/chestozo/acd651382f9590988d4679f8dbb21d19。
• 正如我所见，脚本请求被执行脚本获取并将其存储在缓存中的服务工作者拦截
• 然后我可以看到初始请求需要一些时间然后失败

• 由标签发起的第一个请求script被插入head
• 第二个请求 - 由服务人员完成；它成功了

在这里您可以看到文件请求正在被工作箱拦截：

最后，初始请求失败：

这是我的服务工作者脚本的样子sw.js：

知道这里发生了什么吗？

我创建了一个项目workbox-webpack-plugin，当它运行时127.0.0.1:8080，请求加载我的service-worker.js并且它正在工作，如下所示：

但是当它运行时localhost:8080，请求不会加载我的service-worker.js，只是加载manifest.json。发生了什么？这是正常的吗？

编辑：这看起来像这个Unresolved Question的副本。我将其标记为已回答还是删除？

我在 Vue CLI 3 应用程序中使用来自 workbox-webpack-plugin 的 InjectManifest。我注入的自定义服务工作者处理 Firebase 云消息传递 (FCM)。我需要根据我的环境（本地、暂存和生产环境）收听来自不同发件人的消息。

理想情况下，service-worker.js 应该是这样的：

然而，这段代码似乎没有被 webpack 触及，因为输出服务工作者仍然读取process.env.VUE_APP_FCM_SENDER_ID而不是硬编码的密钥。

如何通过 webpack 运行我的 service worker 来解析环境变量？

我想从我的项目中完全删除 google workbox webpack 插件。如果我只是从 webpack 配置中删除相应的行，那将无济于事，因为用户已经在浏览器中安装了 SW。如果有人经历过吗？或者至少让它只在离线模式下工作，我需要加载最新的站点版本。

那是我的配置：

Chrome v72 似乎忽略了 Cache-Control 标头和缓存 service-worker.js 进行测试，我已将所有资源设置为使用：

导航到 localhost:4000/dist/service-worker.js 时，我能够验证设置是否正确：

即使这样，从 Chrome 68 开始，它“应该”默认绕过 HTTP 缓存： https ://developers.google.com/web/updates/2018/06/fresher-sw

显然不是。

我在“应用程序”选项卡中检查了重新加载更新。我已关闭 Chrome 并重新打开，但它仍在使用缓存中的旧 service-worker.js。

我的工作箱配置如下所示：

我还能够验证，Chrome 正在缓存 service-worker.js，因为如果我：

• 打开一个新选项卡并导航到： http://localhost:4000/dist/service-worker.js

• Chrome 实际上是最新的，现在另一个选项卡会触发“安装”事件。

• 另一个选项卡现在有最新的服务工作者。

倒数第二个测试：

• 注册 service-worker.js
• 进行更改，将 service-worker.js 重命名为 sw.js（注册 sw.js）
• 导航到http://localhost:4000并查看它仍在使用缓存的 service-worker.js
• 导航到http://localhost:4000/dist/service-worker.js -> 404 所以即使它不再存在，它也在使用缓存版本。

最终测试：

当然，现在它获取了所有新的 service-worker.js 更新。

这是 Chrome 错误吗？我没有正确配置某些东西吗？同样的行为也发生在 Chrome Canary 中。

或者，我可以执行以下操作来绕过缓存：

但这似乎是一个黑客......

我在https://github.com/GoogleChrome/workbox/issues/1663报告了完全相同的问题，该问题描述了仅在 Safari 中发生的问题，其中 mp4 视频在被服务人员缓存后未呈现。

我正在使用workbox-webpack-plugin，因此评论中提供的说明https://github.com/GoogleChrome/workbox/issues/1663#issuecomment-448755945不适用于我的情况。我无法workbox-range-requests在我的 webpack 配置文件中要求插件并将其传递给运行时缓存选项，因为我相信这个包仅供浏览器使用。我的工作箱配置正在预缓存 .mp4 资产，并使用网络优先策略进行运行时缓存。

我该如何workbox-range-requests设置workbox-webpack-plugin？

编辑：在下面 Jeff 的回答之后，我将我的 webpack 配置调整为以下内容：

该构建产生以下服务工作者：

如果之前忘记提及，但我还crossOrigin="anonymous"为元素添加了属性video。

编辑：

证明它在 Safari 上无法按预期工作的重现：https ://github.com/acostalima/workbox-range-requests-mp4-demo

我有一个使用 Workbox webpack 插件生成的带有服务工作者的 SPA。根 url "/" 是我网站的单独主页，而不是我的 SPA 的一部分，所以我希望我的服务工作者不要回退到我的 SPA 的应用程序外壳，而是在我导航到"时从服务器获取主页" /”。我知道工作箱有 navigationFallbackBlacklist 选项来指定不属于 SPA 的 url 模式。此选项适用于我的网站具有的其他几个 url 路径，但不适用于根 url。我想知道我的用例是否有一些解决方法。