问题标签 [workbox]

我有一个 Next.js 应用程序，它当前正在使用 sw-precache 和 sw-precache-webpack-plugin 来生成服务工作者。

我想改用 Google Workbox 和 workbox-webpack-plugin。有没有人在 Next.js 上下文中成功地做到了这一点？

我有一个服务器端渲染的反应应用程序，我想向它添加服务工作者缓存。

在应用程序中，用户可以登录并查看他们保存的设置。在初始加载时，服务器使用基于 auth cookie 预先呈现的这些设置为应用程序提供服务。如果用户未登录，则服务器会预先呈现登录表单。

如果我在主页 index.html 上使用默认的缓存优先策略，那么当用户注销并刷新页面时，他们将看到他们仍然登录的缓存版本。

在 index.html 上使用网络优先策略部分地解决了这个问题，但在这种情况下它会失败：用户注销或更改他们的任何设置，离线然后刷新页面 - 他们会看到缓存的版本，就好像他们没有任何操作一样曾经发生过，尽管他们只是在刷新之前看到了实际的最新版本。

我能想到的一种解决方案是每次发生非 GET 请求时更新 index.html 缓存 - 例如，注销必须是 DELETE 请求。这实际上可以解决所有问题，并且可能足够通用以包含在框架中。

无论如何，我想我可以弄清楚如何使用 workbox 收听非 GET 请求，但是如何更新侦听器中的 index.html 缓存？

我将继续检查工作箱源代码，但我很想得到提示，提前谢谢！

我正在使用带有 Angular-cli-1.6.0 的 workbox-build-2.1.2 和 workbox-sw-2.1.2，一切正常，但是当我更新应用程序并将其构建用于生产并且 sw.js 文件被修改时然后在 chrome 浏览器中，服务人员没有更新它继续使用旧版本，直到我手动取消注册它。它是否应该不安装新的 sw.js 文件，并且在安装新版本时它还会清理网站旧数据兑现并自动开始新的石板，还是我需要设置该部分？

这是我在 Angulars 主文件中注册 sw.js 的方法：

我用 npm 运行的 generate-sw 文件

和基础 sw.js 文件

*****更新*****

将 express.js 用于开发服务器，我将 Cache-Control 设置为零，现在当我重新加载页面时，服务工作者会更新到较新的版本。我在生产中感到困惑，将 Cache-Control 设置为天/年，服务工作者需要多长时间才能更新，它会清除旧的现金和 indexDB，还是我们必须手动完成

这是快递的代码：

在我们的项目中，我们使用 webpack-dev-server 来运行我们的开发环境。我们目前正在使用workbox将项目转换为渐进式网络应用程序。

当我们使用 NODE_ENV=production 运行 webpack 时，一切正常，因为它首先编译文件，然后工作箱插件将它们拾取并将它们添加到 service-worker。

当我们热运行 webpack-dev-server 时，运行工作箱插件时构建失败，因为它在 dist 文件夹中找不到任何文件。

问题似乎是工作箱没有拾取内存中生成的 js 和 css 文件，并且似乎需要文件系统上的文件。

关于这应该如何工作的任何想法

我需要添加credentials: 'same-origin'到所有获取请求中，以使 PWA 在受密码保护的网站中工作。否则，如果我离开网站并稍后返回，浏览器不会询问我的密码并返回未经授权的错误。

我如何使用 Workbox 做到这一点？我注意到RequestWrapper该类包含 fetchOptions，但我找不到使用它们的方法。

我想从使用策略令牌作为 URL 参数的安全 CDN 缓存资产。例如：www.cdn.com/image.png?Policy=AAAAA&Key-Pair-Id=BBBBB 如果我重新访问该站点，我想从缓存中获取资产，即使我有不同的策略令牌和 Key-Pair-Id。例如：www.cdn.com/image.png?Policy=CCCCC&Key-Pair-Id=DDDDD

如果我在服务人员中使用此代码：

它在缓存中找不到响应并进入网络。我希望它通过没有 URL 参数的 URL 匹配（即使 Policy=CCCCC&Key-Pair-Id=DDDDD 实际上不是有效的策略）。只需查看是否www.cdn.com/image.png存在并检索它。

我已经使用 Workbox 几天了，我正确地将它设置为从源生成服务工作者，并且不要让 Workbox 为我生成它。

它工作正常，但现在我试图包含workbox-background-sync模块来存储一些失败的 POST 请求，但我无法让它工作。运行 SW 后，我在第一个 backgroundSync 行（第 9 行）上得到“ Uncaught TypeError: Cannot read property 'QueuePlugin' of undefined ”。这是生成的 ServiceWorker 文件：

我尝试使用 workbox.loadModule('workbox-background-sync') 加载它，这是我在 github 上找到的一种解决方法，但它仍然无法正常工作。self.workbox = new WorkboxSW()此外，以同样的信念尝试 。

PS：有没有办法在networkFirst这样的策略失败并且它会用缓存响应之后挂钩一个函数？因为我想知道，如果我得到一个缓存的响应，我想告诉用户，通过修改传入的响应并稍后在 Vue 中处理它。谢谢阅读！

使用 webpack 作为构建系统的 react PWA。对于服务工作者，我们使用的是工作箱版本 2.1.2。

• 拥有一个以 JSON 响应的 GET api http://localhost:5000/dist/abc/123/。注册了路线

  /li>

确保加载新的服务人员。当 API 调用返回状态为 200 时，缓存存储下没有创建缓存api。因此它也不能离线工作，请参阅No cache "apis" 验证以下内容，

• 请求更正 URL
• 代码流在服务工作者安装阶段命中 registerRoute
• 没有错误消息。调试消息也没有给出任何线索。有什么方法可以启用更多调试吗？
• 服务工作者在适当的范围内注册，调试消息Service Worker registration successful with scope: http://localhost:8081/dist/，

接口：http://localhost:5000/dist/abc/123

调用的 API，http://localhost:5000/dist/abc/123/. 请注意，它是跨站点调用，调用的基本页面是http://localhost:8000. 如前所述，API 调用成功并返回状态为 200 的响应。

我对 serviceworker/workbox 很陌生。对此的任何指示都非常感谢。

当 glob 模式找不到任何匹配的文件时，Workbox 会引发以下错误：

在某些情况下，可能期望目录为空（例如，在开发构建文件期间，文件没有被缩小，因为这需要相当长的时间）。一个 env 参数可能会被用作一种解决方法，但如果 Workbox 在没有找到文件时可以优雅地失败，那就太好了。

我正在从 sw-toolbox 切换到 Workbox，但我不知道如何使用setDefaultHandler()。

如果我尝试（如上面链接的文档中所述）：

我收到 runtimeCaching 未定义的错误：

未捕获的 ReferenceError：未定义路由器

所以..我如何使用它并以类似于我如何配置 sw-toolbox 的方式配置它：

我希望能够做这样的事情：

..这不会引发编译错误，但是当我使用它时，我得到了这个：

未捕获（承诺中）TypeError：不支持请求方法“POST”

..我的“默认”缓存存储仍然为空..？