问题标签 [sw-precache]

我正在尝试为我的网站实施服务人员。我将 SWPrecacheWebpackPlugin 与 vue 和注册等一起使用，效果很好。不知何故，它不会缓存所有文件，在这种情况下，我猜是最重要的 app.js 文件。

当我在线时，vue 构建的文件结构如下所示：

但是当我检查缓存时 app.js 文件丢失并且在离线模式下我只是得到一个白页。

所以很明显 service-worker 已经启动并运行，甚至正在缓存一些东西，但不是相关的 app.js 文件。

我的 webpack 配置如下所示：

我实际上不知道我错过了什么。

更新：

app.js 文件太大，插件没有缓存。没有警告，没有错误，什么都没有……

因此，我们有一种情况，在生产中，由于我们服务器上的一个奇怪的 .LICENSE 文件给了我们 404，我们的 PWA 上的预缓存失败了

特别是这样的错误

我们如何解决这个问题？

我正在阅读有关与服务人员进行预缓存的内容，最终得到了这种预缓存。

我不明白为什么它使用带有哈希的固定网址。每次文件更改时都必须动态创建它们。

那么手动放置它们并将修订设置为空有什么意义呢？

正如我们现在在工作箱的第 5 版中，importWorkboxFrom配置已被删除，但如果我们使用injectManifest我们应该如何在本地导入工作箱？是使用importScriptswith的唯一方法https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js吗？

文档说generateSW默认使用本地导入但是呢injectManifest？ https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v4#build_tool_option_overhaul

我正在开发一个基于音频的 PWA，由于我不熟悉这项技术，我对 service worker 中的缓存管理和失效有一些疑问。

应用程序需要离线工作，我使用 SW 预缓​​存进行了介绍。

我唯一的疑问是数据量：在经验中有5 个用例场景。每个场景都有大约 30MB 的音频内容，这意味着大约 150MB + 所有图像、js 和 css 总共要预缓存。

我知道这超出了某些浏览器的限制（参见 this question和 this article），通常您必须注意存储大小，这也取决于用户设备的磁盘可用空间。

所以这就是我的想法：由于在一种情况和另一种情况之间，用户会在有 WiFi 连接的办公桌前停下来，我的想法是在用户操作（如按下按钮）后清空缓存运行时，并将其替换为新内容. 这样我一次只能存储一个场景，这意味着〜35MB，一个合理的大小。

你认为这是一个好方法吗？实现这一点的最佳方法是什么？

这是我当前的代码：

service-worker.js

index.js

谢谢你的时间，弗朗西斯科

我在看 service worker practice 和workbox。

有很多文章谈论预缓存，workbox 甚至为此提供了特殊的方法precachingAndRoute()。我想我理解预缓存和运行时缓存之间的概念差异，但让我感到困惑的是为什么要如此特殊地对待预缓存？

我读过的所有关于预缓存的文章都强调了它如何在客户端离线时使 Web 应用程序可用。这不是缓存（即使它不是预缓存）的用途吗？我的意思是，如果配置正确，运行时缓存似乎也可以实现这一点。是否必须预先缓存才能使 Web 应用程序离线工作？

唯一明显的区别是何时创建缓存。那么，如果客户端离线，无论是预缓存还是运行时缓存，都无法创建缓存，如果在客户端在线时的最后一次访问期间创建了缓存，那么对于当前访问响应的缓存有什么关系呢？预缓存还是运行时缓存？

考虑 2 个抽象案例进行比较。假设我们有两个不同的服务工作者，一个 ( /precache/sw.js) 只做预缓存，另一个 ( /runtime/sw.js) 只做运行时缓存，其中/precache托管/runtime相同的 Web 应用程序（意味着要缓存相同的资产）。

在什么情况下，由于不同的 sw 设置，Web 应用程序可能会以不同的方式/precache运行？/runtime

在我的理解中，

• 如果无法创建缓存（例如第一次访问时离线），那么预缓存和运行时缓存应该没有什么不同。
• 如果可以成功创建预缓存（即客户端在第一次访问时在线），则运行时缓存也应该如此。（让我们不要过于疯狂，例如客户可能仅在某个特定时刻在线，在我的示例中它们仍然应该是相同的。）
• 如果缓存可用，则预缓存和运行时缓存无关，因此仍然相同。

当 precache 显示优势时，我能想到的唯一场景是，当缓存需要在当前访问时更新时，precache 确保当前访问获得最新信息。如果是这种情况，NetworkFirst 运行时缓存不会做同样的事情吗？而且，与“离线”无关，我读过的几乎每一篇关于 sw 预缓存的文章都会提到。

在线/离线如何使预缓存成为英雄？

我在这里错过了什么，预缓存有什么特别之处？

我正在尝试配置workbox-build以创建服务工作者（generateSW ）或根据预定义的 URL 列表而不是模式匹配向现有服务工作者注入清单（injectManifest ），以便在应用程序加载时预缓存特定资源.

不是这样的：

但像这样：

这样自动生成的 service worker 就会包含一个类似这样的清单：

并且在构建期间资源更改时会更新修订，以便下次加载时浏览器中的缓存无效。

提前致谢！

我已经使用workbox-webpack-plugin.

当我尝试预缓存文件时出现错误。

我得到的错误（见下图）

控制台输出

虽然self.__WB_MANIFEST正确返回

我尝试调试workbox-precaching但由于没有提供 gulpfile 而被卡住。我找不到 gulpfile node_modules/workbox-precaching。

这里是我的代码 src/sw.js 的详细信息

webpack.config.js

注册.js

包.json

我正在尝试实现工作箱以在网站上预缓存图像和视频资产。

我创建了一个服务工作者文件。它似乎在我的应用程序中被成功引用和使用。服务人员：

该应用程序使用 workbox-window 来加载、引用和消息服务工作者。该应用程序如下所示：

这个项目使用 vue 和 vue-cli。它有一个 webpack 配置，允许将插件发送到 webpack。配置看起来像：

我可以看到消息已成功发送到服务人员并包含正确的有效负载。但是，这些资产永远不会出现在 Chrome 开发工具缓存存储中。我也从未看到任何与通过 messageSW 发送的资产相关的工作箱日志记录。我还通过禁用我的互联网进行了测试，资产似乎没有加载到缓存中。我在这里做错了什么？

我发现工作箱文档有点不清楚，并且还尝试从服务人员中删除消息事件处理程序。然后，像这样向 service worker 发送消息：

这似乎也对缓存没有影响。

我不想为所有用户预缓存，而只为成员预缓存。我想这样做是为了避免服务器上不必要的负载以及对一次性访问者进行不必要的缓存。

因此，当访问者登录时，我会向服务人员发送一条消息。在服务工作者的以下片段中，“收到的消息”已登录控制台。但是图像没有被缓存。并且没有错误信息。

如果我直接放在precacheAndRoute(images)下面，const images = [....];那么图像会被正确缓存。

我是服务人员的新手。非常感谢任何帮助。