问题标签 [workbox-webpack-plugin]

我想用 webpack 4 构建我的第一个 PWA。workbox-webpack-plugin 与 offline-plugin 有什么区别？

如何使用谷歌工作箱（workbox-webpack-plugin）从服务工作者缓存中删除 index.html？以前使用我刚刚写的 sw-precache-plugin

但它不起作用

清单文件中不存在 Html 文件，但每次都从 service worker 获取。

我有一个带有自签名 SSL 的快速服务器，它只为 SPA 前端提供资产。当我访问https://localhost:8433应用程序统计并成功获取所有必需的资产时。然而，同时应用程序的服务工作者（工作箱）也发送其请求以缓存相同的资产。这些请求随机失败TypeError: Failed to fetch

网络选项卡：

似乎某些请求被服务人员随机取消。

我试图搜索类似的问题，但没有成功。一些人建议使用 CORS，但这没有帮助，交换localhost或127.0.0.1更改缓存策略具有相同的效果，最后我只有预缓存的最小配置（没有运行时缓存），不幸的是没有任何帮助。

我很确定这应该是一个常见问题，我只是想念它:) 有人有什么想法吗？

顺便说一句，当应用程序从不安全的情况下提供时http- 根本没有错误。

我正在使用工作箱，策略是 stalewhilerevalidate for /xyz API。

1. 通过缓存中的服务工作者进行响应。总耗时：741ms

2. 通过工作箱从服务人员获取呼叫到服务器。总耗时131ms

代码片段看起来像跟随匹配回调和匹配回调只是具有 url 匹配的逻辑。

我错过了什么吗？请告诉我

我正在使用工作箱来缓存我的单页应用程序。我的 webpack 设置如下所示：

在大多数情况下，它都有效。但是，有时某些设备拒绝更新。一种情况：

1. 我用 ctrl - F5 刷新了几次页面。但是新版本没有出现
2. 我打开 chrome 开发工具并执行 ctrl - F5。然后它工作
3. 如果我按正常 F5（打开或不打开 devtools），它会恢复到应用程序的先前版本。此外，如果我关闭开发工具并按 ctrl - F5 它也会恢复。

其他设备完美升级。

我有一个laravel项目，我喜欢用它workbox来为我的应用程序生成服务人员。

所以我安装workbox-cli了，运行workbox wizard，我得到：

运行时workbox generateSW，我会得到：

之后，我sw.js在我的注册app.js：

启动页面时，我可以sw.js在应用程序选项卡中看到已注册和激活。我还检查了缓存存储以及我想要缓存的所有文件。但是不知何故，当我更改为离线时，我仍然无法显示缓存的内容。

我用简单的 1 页html和 1尝试了相同的代码（上面的所有内容） js，一切正常。在控制台中，我什至可以看到来自以下的调试消息workbox：

但我没有在我的Laravel应用程序中得到它。我怀疑ImportScriptinLaravel不知何故不起作用，但我不确定如何调试它。

我正在尝试将 service-worker 与我的 Angular 应用程序一起使用。它是使用 webpack 构建的。

我使用 workbox-webpack-plugin。我想为我的 GET API 调用提供缓存服务，并在后台更新数据。

为此，我将选项runtimeCaching与处理程序一起使用staleWhileRevalidate（有关 GenerateSW 插件的更多详细信息，请点击此处）

这是我在 webpack.config.js 中的配置：

根据这个文档，我应该能够在缓存更新时收到一个事件（我想向用户显示一些东西，以便他可以刷新数据）。

接收数据的代码如下所示：

我将此代码放在我的一个 Angular 组件中，即使我确定缓存已更新，它也从未被调用过。

我认为这可能与更改检测在 Angular 中的工作方式有关（如本问题中所述），但我不确定如何修复它。

有没有人设法成功收听来自 Angular 组件的广播事件？

在使用 Workbox webpack 插件创建我的服务工作者时，我将两者都设置skipWaiting为clientsClaimtrue。在第一个初始加载时，没有先前的服务工作者运行，我看到我所有的预缓存资源都被初始登录页面上的 sw 加载（大概是放入缓存中）。我们会说a.js，这些资源之一确实在网络选项卡中显示为在这些资源中加载。

然后，我浏览到我的网络应用程序的一个新部分，该部分使用a.js，我确实a.js在网络选项卡中看到了负载，但不是来自服务工作者；它像往常一样从网络加载。似乎在第一次初始加载时，软件正在运行并缓存资源，但没有从缓存中提供服务。这是预期的行为吗？

需要明确的是，如果我清除所有服务工作者，然后再次浏览到登录页面，然后刷新并重新加载登录页面，然后浏览到其他部分，我确实可以看到a.js来自缓存的负载，来自服务工作者。所以看起来服务工作者的初始安装并没有导致它完全活跃。

这是预期的，如果不是，有没有办法解决这个问题？

我们有一个信号页面应用程序，它安装了 Service Worker 并处于活动状态。

现在我们的服务器重新构建了应用程序，Service Worker 文件正在服务器端进行更新。

我们的客户不知道这个新的 Service Worker 文件，它仍在使用旧的 Service Worker 文件。

什么时候有效？ 如果我刷新/重新加载应用程序，则正在安装新的服务人员。

如果服务工作者文件正在服务器上更新并且客户端没有被重新加载，我们如何刷新客户端？

可能的解决方案：我认为，我需要在 1 小时后进行轮询。

我在从 webpack 插件同步工作箱后台同步时遇到问题。当我通过开发工具在教程中强制它时会发生这种情况：

https://developers.google.com/web/tools/workbox/modules/workbox-background-sync

但是，一般什么时候出现呢？它背后的规则是什么，我可以以编程方式强制它吗？

提前致谢，

格热戈日