问题标签 [workbox-webpack-plugin]

我目前正在尝试使用工作箱 InjectManifest 插件设置新的 webpack 5.0.0-alpha2。

据我所知，这应该生成一个 precacheManifest 并将其注入我的 serviceWorker 并替换workbox.precaching.precacheAndRoute(self.__precacheManifest || []);.

但对我来说，没有生成 precacheManifest 并且这条线仍然存在。

这是我的 Workbox Webpack 插件配置：

所以没什么特别的。

我正在尝试为我的应用构建 PWA；并且花了将近 48 小时试图弄清楚如何使用 Workbox 和 Laravel Mix。具有讽刺意味的是，谷歌说 Workbox 是为了让事情变得简单！

呸！

好吧，到目前为止我已经想通了——

1. 我需要使用，InjectManifest Plugin因为我想在我的 Service Worker 中集成推送通知服务

2. 我不知道如何为swSrcand指定路径swDest。

3. 什么代码应该进入我的webpack.mix.js，我是否应该在我的文件夹中有一个临时服务工作者来在resources/js文件夹中创建一个新的服务工作者public/。

有人可以帮忙吗？

PS：我几乎阅读了所有的博客和帮助文章；但没有人谈到可靠地使用 Workbox 和 Laravel 混合。非常感谢这里的一些帮助。

我正在使用 Vue CLI PWA 工作箱插件模式。我的应用程序有 1000 多个资产，预缓存它们会导致性能非常差。请检查一下：

https://nikudu.com/

有没有办法更具体地预缓存文件？例如，通过 URL 预缓存文件。在 urlx/y上仅预缓存文件 1、5、6，在 url 上x/v预缓存文件 7、8、2。

在开发模式下（本地）使用 Workbox Webpack 插件时，我收到以下 service worker 错误：

PrecacheController.mjs:62 未捕获的 add-to-cache-list-conflicting-entries：传递给“workbox-precaching.PrecacheController.addToCacheList()”的两个条目的 URL 未定义但修订详细信息不同。Workbox 无法正确缓存和版本化资产。请删除其中一项。

我相信这种情况正在发生，因为当 webpack 重新构建时，它似乎向 precache 调用添加了两次静态资产。一次在service-worker.js文件中，另一个在precache-manifest.XXX.js文件中。查看这两个文件，我可以看到在两个地方都添加了块和条目脚本，包括service-worker.js.

这在生产中不是问题，因为每个构建都会从头开始擦除和重建。

这是我的 Workbox Webpack 插件配置：

我的问题是路径设置不正确。例如在 service-worker.js 它创建：

但是由于我使用的是 Jigsaw Framework 并且公共位置不同，所以它必须是

预缓存文件本身也是如此，所有路径都是错误的：

一定是

我尝试使用 globDirectory 设置，但它不起作用。

这是我的“标准”Webpack 配置：

我收到这个警告：

未检测到匹配的服务人员。您可能需要重新加载页面，或者检查当前页面的服务工作者是否也控制清单中 URL 的开始。

我的服务人员正在工作的东西。

我什至尝试使用其他两个 URL，它们都使用 HTTPS。

现在我将向您展示代码，我正在使用：

网站.webmanifest

为了创建我的 service-worker，我使用了 webpack 插件：WorkboxPlugin 结合 Laravel Mix：

webpack.mix.js

它创建了service-worker.js：

使用precache-manifest.js

我应该怎么处理这个警告？

我有以下工作箱配置

我的快递服务器没有缓存服务人员

1. 该页面的首次访问按预期工作。service-worker.js返回为最新版本并预缓存所有资产和shell.html.
2. 刷新时，正如预期的那样，将shell.html提供服务而不是转到服务器，并且资产是从服务工作者提供的。
3. 假设我重建资产并更新service-worker.js.
4. 我希望service-worker.js从服务器加载新资源，并预缓存所有新资源。

相反，我看到以下空响应

我在控制台中收到以下错误The script has an unsupported MIME type ('text/html').

所以看起来服务工作者正在服务shell/index.html而不是去服务器service-worker.js。为了验证这一点，我访问了view-source:https://localhost/service-worker.js如下所示。如何阻止服务人员缓存自身。我以为这就是我正在做的navigateFallbackBlacklist

我正在使用工作箱为 React 项目构建服务人员，我不确定出了什么问题，但我在控制台中不断收到错误消息，提示无法读取未定义的属性 'CacheFirst'。

我正在获取的路由来自带有 sqlite 数据库的 nodejs 后端，它返回的数据来自数据库中列出的日期。我不确定这是否与它有关，或者它只是一个 Workbox 问题。每次更新此文件后，我执行了workbox injectionManifest，然后使用serve -s -p3000 build在浏览器中为应用程序提供服务。

这听起来可能很疯狂，但我正在创建多个 css 和 js 文件来为不同品牌构建我的应用程序。为此，我有大约 4 个单独的 webpack 文件，一个用于我的 js，这对于我的所有品牌和 3 个不同的 css 文件生成器都很常见。现在我想添加workbox-webpack-plugin创建一个sw.js和清单文件，它会自动导入所有清单文件。我该怎么做？

到目前为止我试过了

但是当我这样做时，最后一个 webpack 文件覆盖了整个输出 sw.js，这看起来很公平，所以我想我会一个一个地运行构建，并给出上一个构建生成swSrc的输出sw.js，没有锻炼。

我如何实现这一目标？请提供任何线索。

在生成的precache-manifest.*.js文件中，当我需要绝对路径时，所有 URL 都引用相对路径，因为我的应用程序也会有一些子目录。

生成文件示例：

当我需要它看起来像这样时：

我正在使用webpack4.41.0 和workbox-webpack-plugin4.3.1

任何帮助将不胜感激！如果需要，我也可以添加更多细节。

这是我的 webpack 配置：

还有我的 GenerateSW：

还有几个定义的公共变量：