问题标签 [workbox-webpack-plugin]

我的项目有一个使用 Workbox 的服务工作者的旧部分实现。我一直在努力更新它并在此过程中添加功能。在这个过程中的某个地方，我在开发控制台（Chrome 版本 81.0.4044.129）中丢失了 Workbox 日志。

我不确定这发生在什么时候，因为我在尝试升级和添加工作箱窗口时并没有过多关注它们，但我现在希望它们回来。

我正在使用 workbox-webpack-plugin 和 workbox-window 的 v5.1.3。

我的 webpack 配置如下所示：

我的服务工作者文件如下所示：

该应用程序本身是一个 React 应用程序，最初是使用 create-react-app 创建的，但后来被弹出。我只在进行生产构建时查找日志，然后使用http-server包在 localhost 上运行。

我检查了工作箱调试页面，这就是我在该行中添加的原因，self.__WB_DISABLE_DEV_LOGS = false但这没有任何区别。

有什么想法可以让我找回日志吗？当我尝试向服务人员添加移动功能时，这将使我的生活变得更加轻松。我还仔细检查了 Chrome 开发者工具中的所有日志级别，包括详细日志。

我还添加了自己的日志，它们确实出现了，所以我知道正在调用服务人员。

我目前正在使用 GenerateSW 插件从以下位置生成服务工作者文件workbox-webpack-plugin：

此生成sw.js的文件包含由GenerateSW注入其中的插件生成的代码。但是，这段代码没有被转译，我需要它，因为谷歌关于将它写入哪个 ecmascript 版本的决定与我无关。我可以sw.js在 webpack 运行后使用 babel 转译文件，但我想知道是否有办法让这个文件简单地自动转译（最好使用envwebpack 本身使用的相同信息）？

今天我尝试了 Create React App 的 ServiceWorker，除了在 public/img/favicon.ico 中定义的我的页面的 Favicon 之外，所有内容都被缓存，所以当页面脱机时，Favicon 消失并且连接错误显示在控制台中，也是如此任何人都有经验如何配置服务工作者的网页插件来缓存这个？

关于我的目标的详细信息。

我将工作箱 webpack 插件配置为将 API 缓存 30 秒。我想在触发不同的 API 请求时有条件地强制缓存破坏它。

例如，下面的配置缓存功能标志。当页面向“updateTests”发送请求时，我试图缓存它。

工作箱配置以缓存功能标志 工作箱配置已更新以清除功能标志缓存清除使其工作

我尝试过的事情

• 手动删除 IndexedDB 会重新获取功能标志

只是我想预缓存(dist/_nuxt/*)我的 nuxt 项目的 dist 文件，但是当我运行 nuxt.js PWA 应用程序时，我在浏览器 > 应用程序 > 缓存 > 缓存存储中找不到预缓存列表。

如何预缓存 webpack 生成的所有资产文件？

Workbox 让我发疯。当我的应用程序启动时，所有预缓存的路由都返回 http404，因为工作箱 InjectManifest 插件似乎将“自动”添加到所有缓存的 url。我必须知道它为什么这样做。我尝试过重新安装 npm 包、以隐身模式运行、清除所有缓存等。

我使用“webpack-dev-server --mode development --open”运行应用程序，我收到以下警告，这可能是问题的一部分：

我不知道为什么会出现这个错误，因为我在 webpack 配置中设置了 watch:false。

请注意所有路径如何在前面有“auto”并返回 http404。请注意，我清除了 Chrome 的“应用程序”选项卡上的所有缓存。同样的情况也发生在隐身标签中。

当打开一个新标签并删除“自动”时，它工作正常：

带有注入清单的 service worker 文件显示“auto”是 url 的一部分：

有没有人见过这个？我开始考虑从头开始编写服务工作者并放弃工作箱，但如果我能让工作箱正常工作，我显然更愿意使用工作箱。

编码：

我使用 workbox-webpack-plugin 在我的 service worker 中注入预缓存清单，如下所示：

我的 webpack.config.js 如下所示，没什么特别的：

我的 index.html 也很简单：

这是我的 package.json：

如果 workbox-background-sync 表中有待处理的请求，我想在 Vue 中显示通知。这是我存储所有待处理请求的 IndexedDB。

这是我的 service-worker.js 文件

我修复了我的 SPA 站点的 service worker 配置，现在它没有缓存 index.html 文件。问题是我可以对已经将旧 index.html 文件作为服务工作者缓存的一部分的匿名旧 \ 现有访问者做什么？

我不能告诉他们清除缓存或手动刷新，因为我不认识他们。他们不时打电话给我的办公室，我向他们解释该怎么做，但我确信很多访客没有给我打电话，也因为这个问题而不能使用我的新版本。

同样，自从我对服务工作者配置进行修复以来，我对访问我网站的访问者没有任何问题。我对在修复之前拥有旧 index.html 的访问者有疑问。

我正在使用 NGINX 和 ReactJS。

我在文件名中放置了一个console.log，compression-webpack-plugin在构建过程的最开始，将打印一个日志，实际上，在将sw.js文件的内容复制到一个新创建的名为的文件之后service-worker.js，但目前没有关于self.__WB_MANIFEST哪个文件的信息必须通过workbox来宣讲precacheAndRoute。在构建过程结束时，当信息到达时，一个数组（宣扬的时间及其修订版）将被替换self.__WB_MANIFEST并注入service-worker.js，但不会发生压缩日志。因此 . 的压缩文件和原始文件将不兼容service-wroker.js。

webpack 插件

包.json

我有一个 Vue.js 应用程序，我目前正在使用工作箱进行缓存，因此它可以脱机工作。但是，视频似乎在 Safari 中不起作用。

我已经研究过，所有迹象都指向这一点： https ://developers.google.com/web/tools/workbox/guides/advanced-recipes#cached-av

但这似乎对我不起作用。

这是我的代码：

网页包

sw.js（服务工作者）