问题标签 [workbox]

在WorkboxJS的 1.0.0 版本之后，是否应该将其用作sw-precache的替代品？

从我有限的经验来看，它似乎包括了sw-precache' andsw-toolbox 的所有精彩内容等等。用他们自己的话来说：

下一个版本的 sw-precache 和 sw-toolbox。

Workbox 是对我们之前专注于模块化的 Service Worker 库的重新思考。它旨在通过统一的界面减少摩擦，同时保持整个库的大小。同样强大的功能，更易于使用和跨浏览器兼容。

我一直在尝试使用Workbox Service Worker 工具包。

此处的副本表明 workbox-backround-sync QueuePlugin 将捕获失败的请求并稍后重播它们。因此，经过一番挖掘，我发现了如何在 POST 方法调用上使用它。

但是请求的重放似乎有点命中注定。使用 Chrome 开发工具使应用程序脱机，确实将请求放入 IndexedDB 中的队列中。似乎什么都没有发生，我想调试。我注意到在 github 上的演示中，它使用 BroadcastChannel 来触发重播。所以我实现了这一点。然后从活动选项卡中的控制台，我在开发工具中取消选中离线并发送了一个 postMessage。现在请求愉快地触发了，响应被存储在队列中的每个项目中。

然后我让机器运行，进入待机状态等几个小时。然后我在日志中注意到，即使每个项目都有响应，它也很高兴地发送重复请求。

在这一点上，我尝试复制但不能。我发送了一个 BroadcastChannel 消息，它只触发没有响应的请求。所以我现在回到开始，发出更多的离线请求，确认它们在数据库中，恢复在线并等待。没有。

我看到在Queue 的构造函数中它创建了一个新的 RequestManager 并在它的构造函数中设置了同步事件侦听器。所以我猜它应该在某个时候做点什么。

如果有人可以提供帮助，我只是想确保我理解预期的行为。

这是我的代码。

在 macOS Sierra 上的 Chrome 58 中进行测试。

Bellow 是我如何注册我的 serviceworker ：

这个 service-worker 是在 Workbox 构建期间生成的。

我有点担心，因为这些通知显示在我的电脑（ubuntu + chrome 59.0.3071.115）上，但从来没有显示在我的手机上（android 6.0.1+ chrome 59.0.3071.125）

使用远程调试功能进行分析后，我的手机似乎onupdatefound从未触发过。

我对 UX 感觉非常糟糕，考虑到移动设备上的访问者不知道新版本的网站正在等待中......

任何建议或意见将不胜感激

编辑 1：我在此网页的“浏览器兼容性”部分找到了更多详细信息：https ://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/onupdatefound 。看起来 Android 版 Chrome 是否支持此功能尚不清楚。

onupdatefound当浏览器不支持事件时，你们有一种后备/解决方法吗？

编辑 2：作为对 Jeff 的回应，
sw.js标头在.htaccess文件中进行管理：

产生：

关于您建议的工作箱微调，我还没有时间深入研究，所以我workbox-build在 gulp 文件中使用了 easy 。但我希望会:)

你认为这可能是由skipWaiting: true?

编辑 3：尝试使用 BroadcastChannel

即使test在 Chrome、mobile 或 firefox 的 log 中输出，也只会在 Chrome 上抛出更新消息

如何在 WorkboxSW 中使用以下代码为所有每个缓存的 url 注册路由。这个每个缓存的 url 包括也将转到服务器的 ajax！

在我的 service worker 中使用来自workboxjs 示例的以下 js进行测试：

我想尝试如何使用 workbox-sw 在离线模式下对发布请求进行排队，因此一旦网络可用，它就会处理来自队列的请求！

Q 1： 我想我需要导入额外的库来定义我的 post 方法的路由，如 github问题 #634上所示

如何在浏览器上使用导入？我尝试使用importScripts但它不起作用。

Q 2： 我是否需要任何额外的库来进行后台同步，所以 post 方法需要排队？

我是服务人员的新手，我正在使用 Workbox 预缓存我的应用程序外壳并缓存我的 api 数据。

资产的预缓存工作正常，缓存正在创建和填充。

在我第二次重新加载页面之前，运行时缓存不会创建缓存并填充它。

我认为这可能是时间问题，所以我在 javascript 中设置了数据的页面重新加载，但这仍然没有缓存调用。

我没有做任何特定于创建缓存的事情，应用程序代码是：

然后在服务人员中：

我正在使用 Chrome 开发工具来检查 sw 状态和创建的缓存。对数据 URL 的网络调用如下：

第一次加载页面：
第二次加载页面：

对于我做错了什么或如何调试它的任何建议，我将不胜感激。

提前感谢
丹

下面的路由定义将 json 数据作为 MyCachedData 存储在缓存中，IndexDb 只存储 url 和时间戳。

是否可以仅将 json 数据存储在索引数据库中，如何定义它以使用 Workbox 拦截（添加、更新、删除）？

我几乎完全设置为具有应用程序外壳架构的 pwa，使用类似前端的反应（但使用秘银作为渲染引擎）和 express node.js 后端和 ssr，但在最后一个问题上很难通过。

更新：我们也快速使用缓存和我们的 CDN。它在开发上都被禁用了，但也许有些标题正在偷偷摸摸并搞砸了？

我正在使用 registerNavigationRoute 注册我的 html 文件，该文件也通过 precache 和 workbox-build 缓存。我的服务人员在首次加载或硬刷新时注册良好，但是当我尝试进行定期刷新时，我收到此错误消息

在 router.js 文件的第 140 行附近，我看到了这条消息

所以我猜我的节点路由搞砸了？我不完全确定，任何帮助将不胜感激！

这是我的构建设置

这是我的导航路线

更新：这是我完全生成的 sw.js 文件的链接https://gist.github.com/nikse/11c531382f136e703bf20648f9421948

有没有办法只匹配 Workbox 中的非导航请求？例如，我有一个包含多个 AMP 页面的应用程序，我想在我的应用程序 shell 中注入这些页面，因此我拦截到这些页面的所有导航并使用 shell 进行响应，如下所示：

我还想拦截所有其他请求并使用缓存优先策略处理它们，如下所示：

但这条路线与第一条路线重叠。我可以用以下代码替换这两条路线以获得我正在寻找的行为：

但是 request.mode不受多个移动浏览器（甚至一些支持 Service Worker）的支持，并且在一些极端情况下它会失败。

是否有一种方便、最实用的方法来匹配非导航请求？

我有一个使用 workbox 2.0.0 的服务人员，对于某些页面，我使用的是 workboxSW.strategies.staleWhileRevalidate() 缓存策略：

一切顺利，我可以即时更新从缓存中获得的响应。但我想即时修改所有响应，包括第一次从网络获取它们时（我必须在其中插入一些 javascript）。

从我的测试来看，cachedResponseWillBeUsed 只允许对来自缓存的响应进行后处理（根据方法名称），但我还没有找到一种方法来访问网络响应（否则通常仍然使用 staleWhileRevalidate 策略。）

有什么建议吗？

非常感谢