问题标签 [workbox-webpack-plugin]

快速提问：

虽然浏览器将我的应用程序识别为有效的 PWA，并在移动浏览器上显示安装弹出窗口。在灯塔中审核时，它显示脱机时不响应，并返回200。我已经验证我的应用程序外壳是从应用程序缓存的（附截图）。

详细信息和背景： 我使用 js 和 jquery 在 laravel 上构建了 PWA。对于资产编译，我使用的是 laravel mix，对于 PWA 框架，我使用的是工作箱。还要明确一点，我没有使用任何 SPA 框架/库。

简而言之，我使用更简单的组件构建了一个自定义水疗中心。

对于 PWA 部分，我正在使用工作箱和 laravel mix。这是我的服务人员 manifest.json 和混合文件。请注意，我使用 sw.js 并使用 laravel-mix 生成 prod-sw.js。这个 prod-sw.js 用于生产

webpack.mix.js

sw.js

清单.json

附上清单文件、缓存存储和灯塔报告的快照供您参考。Manifest.json，缓存存储和灯塔

我一直在关注很多关于如何安装 workbox-webpack-plugin 的教程，但我还没有成功地正确安装它。服务人员似乎正在安装，但它安装在我的应用程序的 dist 文件夹中（这是我的 webpacks 输出路径）。我认为这没有什么问题，但是当我运行我的应用程序时，没有错误，但服务人员没有运行，我注意到它被安装在 localhost:8080/dist （输出路径），即使我尝试在安装在 url“ https://myherokuapp.com/dist ”（相同的输出路径）的 heroku 免费服务器中运行它我找不到修复方法并认为这可能与另一个 webpack 模块有关？

这是我的 webpack 配置：

我为 swSrc 的工作箱提供的服务人员：

我的清单：

这是来自 SW 的注册，我看到它安装在 /dist url

我非常感谢任何帮助，因为我对 webpack 和 workbox 很陌生，而且我完全被困住了。谢谢你们！！。

当我只使用 Workbox 插件中的预缓存时，服务人员会尝试从 indexdb 而不是缓存（浏览器缓存）中获取。

是的，服务工作者比从服务器获取更快。但是，如果它从内存中获取，则需要 0 秒。

我已经看到了工作箱中的所有策略，但它没有尝试首先从内存中获取的策略。

这就是预缓存的一切。

服务工作者.js

我最近使用 Vue CLI 3 创建的 PWA 效果很好，只是我无法让它缓存我的字体超过max-age=0.

这是我的设置：

vue.config.sys（适用部分）

结果service-worker.js（使用默认 GenerateSW 模式）

.htaccess（文件夹应用程序来自）

Chrome Dev Tools Cache Storage Screen Grab

我错过了什么？

我正在尝试了解使用 Workbox 和 Webpack 的服务人员。

我已经将我的 webpack 配置设置为使用带有 chunkhash 作为名称的块。我还设置了 Workbox 来为我生成 SW。然而，问题是每次我重建我的应用程序并发布它时，当用户调用一个已更改的块时，他们得到了死亡加载器并且没有加载任何内容。我确实使用 CleanWebpackPlugin 在每次构建之前清理我的 dist 文件夹。

我相信这是因为 SW 仍在使用旧哈希名调用旧块，并且它不再存在。当我关闭应用程序并从头开始重新加载它时，它会神奇地工作。

我知道软件在他们的逻辑中有这种“延迟”，它将在下一次加载时起作用。但我需要处理不存在的旧哈希块的实例。

1. 我应该保留旧的、过时的块吗？如果是这样，有没有办法我可以使用时间戳而不是 chunkhash 名称，所以我会知道哪些已经更新，并且可以在一定时间后删除旧的？仍然不确定这是否会解决用户的问题。
2. 我根本不应该使用 chunkhash 名称吗？
3. 有没有办法强制服务工作者在调用块之前检查更新？如果有更新，使用它，否则使用缓存的？这会让我的速度太慢吗？
4. 最后，有没有办法告诉用户“新版本可用”。我真的不想这样做，因为这会很烦人，因为我处于早期阶段并且经常发布。

我在这里发布我的相关 webpack 片段：

工作箱片：

以下配置会引发“不支持请求方法 'POST'”的错误。我已经读到存储 api 不使用 POST 方法请求对象作为缓存中的键，但我不知道如何添加路由，该路由显示了这些请求的 networkOnly 策略。

规格（设置取自https://github.com/nystudio107/annotated-webpack-4-config）

• 使用 GenerateSW

webpack.settings.js（记住 importScripts 语句）

wepack.prod.js

工作箱-catch-handler.js

该错误是由 DefaultHandler 的策略引起的，因此我尝试在 DefaultHandler 正下方为这些请求添加另一条路由，但没有成功。例如：

我也尝试了 bgSyncPlugin，但没有成功。任何帮助表示赞赏。我想为 POST 请求（不仅仅是管理 URL）实施一个侧宽 networkOnly 策略。

我有一个基于 Vue CLI 3 的应用程序，我想将其用作 PWA。我需要它在历史模式下工作，因为哈希会干预我在基于 OAuth 的身份验证过程中所做的重定向。

当路由处于散列模式时，设法以 PWA 的形式正常加载。一旦我将模式更改为“历史”，我安装的 PWA 将不再加载 - 我得到的是白屏。我检查了浏览器版本，它仍然可以正常工作（我将 NGINX 服务器中的后备配置为 index.html）。起初我使用 vue CLI 项目和 PWA 插件提供的默认设置。在做了一些研究之后，我在 vue.config.js 中添加了以下内容：

我看到 service-worker.js 中确实添加了以下内容：

但它仍然没有帮助。即使应用程序在我的移动设备的主屏幕上成功注册，它也不会运行，除非我将路由更改回哈希模式。

有人知道我可能会错过什么吗？

谢谢

我正在寻找使用此文档为 PWA 预缓存图像。

我已经尝试了几次迭代，但我正在努力解决这些问题。

这是我的插件代码的一个实例webpack.config.js：

目录结构如下：

我也尝试过使用globDirectory，但没有运气。

如果我手动将下面的代码添加到我的sw-src.js文件中，它会起作用，但这并不理想并且容易出错。

我正在使用带有 workbox-webpack-plugin 的 workbox 来缓存一些资产。我当前的配置应该缓存两个文件：一个 .js 和一个 .css。这两个文件都被正确缓存，但问题是浏览器仍然从网络下载它们，我不知道为什么。

这是我的 webpack 配置中生成服务工作者的工作箱插件：

这是生成的服务工作者：

和预缓存清单：

预缓存确实有效，但看起来 fetch 事件没有被 service worker 拦截。如果我尝试直接从 Chrome 中的地址栏下载文件，则该文件会从服务人员正确加载。但是当它从script我的页面标签加载时，它仍然是从网络下载的。

以下是从脚本标签加载时的请求标头：

任何帮助都会很棒！

我正在使用工作箱服务工作者通过为每个创建自定义缓存来缓存图像和 API 响应。虽然我可以看到路由匹配，但我看不到存储在缓存中的响应，然后由于缓存未命中，服务工作者正在从网络请求每个资源。

我已经为 service worker 使用了 workbox-webpack-plugin，并在其他文件中编写了自定义路由和缓存策略，然后将其传递给插件配置。

同样，我的 css 和 js 文件存储和服务都很好。

我尝试过使用不同的缓存策略，以及没有 webpack 插件的解决方法，但它们似乎都不起作用

这是 webpack 配置：