我正在使用带有 vue cli 3 的 workbox webpack 插件，我想排除文件夹中的文件被添加到预缓存清单中。

在下面查看我当前的文件结构

/src
 /assets
  /css
  /shell
    file1.svg
    file2.svg
    file3.svg
  /svg
    file4.svg
    file5.svg
    file6.svg

我想在我的预缓存清单中包含 shell 文件夹中的文件，但我不想将这些文件包含在 svg 文件夹中。

我尝试在vue.config.js文件中使用globIgnores和排除workboxOptions选项，但没有得到想要的结果。

当我尝试globIgnores: ['src/assets/svg/*']时，什么都没有发生，因为所有文件都包含在内

当我尝试 exclude: [/\.svg$/]时，它排除了两个文件夹中的 svg 文件。

我尝试根据以下内容更改排除选项的匹配模式，但它也不起作用：

我目前在 Nuxt 上使用 PWA 插件，包括工作箱模块。但是，如果我没记错的话，这个插件不允许将 webpack 生成的资产添加到预缓存中。

是否可以使用 workbox-webpack-plugin 仅生成 sw.js 文件的预缓存部分？如果是这样，它会怎么做？

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin上有一些文档，但是我不确定如何将其应用于 Nuxt PWA 上下文。

在 Service Worker 中，我正在尝试使用 importScripts 导入另一个帮助脚本，但是我不断收到一个Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:5000/src/js/utility.js' failed to load.

我在 Service Worker 中有以下代码：

在utility.js我有以下代码：

这些功能还没有做任何事情，但即使是这些占位符也不起作用！最终我希望能够使用idbnpm 模块，这就是我在帮助程序中这样做的原因，所以我也可以从我的普通 Javascript 文件中使用它。
另外我正在使用 Webpack 来构建我的文件，在另一个我不使用它的项目中，它工作正常，但是在这个项目中它只是在构建后找不到文件，所以我想 Webpack 可能是搞砸了。

提前致谢 ：）

我有一个使用 Aurelia 构建并使用 Webpack 编译的 PWA，使用生成sw.js服务工作者文件的 Workbox 插件。我正在尝试提供“新版本可用”用户通知，以便用户在单击应用程序中的链接时可以激活新版本。

我在后台成功下载并安装了新版本，甚至检测到新版本已经准备好。但是，当我尝试调用该skipWaiting()方法以使用新版本强制刷新页面时，它会失败，因为显然我没有正确的范围或对象。

主要问题可能是我无法编辑实际的 sw.js，因为它是自动生成的。这些示例都建议使用self.skipWaiting();，但我不知道如何访问该对象。

webpack.config.js

索引.ejs

应用程序.js

除了最后一行 ( this.swReg.skipWaiting();) 外，一切正常。有没有其他人使用过 webpack+workbox 插件并且由于用户交互而导致 skipWaiting 发生？

我正在尝试使用 Webpack 在 Vuejs 上配置自定义服务人员，但它不能完全使用事件或工作箱（取决于我在哪里调用 sw.js 文件。

按照 Google 的工作箱指南，我已将 SW 配置为注册和缓存数据，但正如我之前提到的，取决于我调用 SW 的位置，它做错了事情（或者我可能只是愚蠢）。

例如，如果我像这样在index.html上注册文件 SW ：

索引.html

...我的 SW 已注册，但无法在下面显示的 SW 文件（service-worker.js）上捕获事件（离线和在线），但我可以使用工作箱：

服务工作者.js

...如果我从index.html中删除脚本标记并调用main.js并像这样修改service-worker.js：

main.js

服务工作者.js

...在这种情况下，我能够听到这些事件，但我无法使用工作箱（我在控制台上收到一个未定义的错误。）

你知道什么可能做错了吗？

我正在使用服务工作者，并使用 webpack 为vuejs应用程序缓存工作箱。虽然到目前为止它运行良好，但当我将新更改推送到我们的应用程序时，应用程序在重新加载页面后中断并出现此错误。此外，在网络选项卡中，我看到它正在请求一个不存在的 app.js 构建文件，该文件是以前的部署文件。我该如何解决这个问题？

如果您观察图像，您可以看到请求将发送到较旧的 app.js 文件，而在左侧的 dist 文件夹中，捆绑的 app.js 的哈希是不同的。

错误图像

我正在使用 workbox-webpack-plugin 并且我已经成功设置了我的服务工作者，因为它在角度前端和 python 后端的不同缓存中缓存了图像、css、js 和我的大部分 api 响应

有一种路由永远不会从缓存中正确检索 api 响应。我不断收到错误

该页面的 api 响应存储在缓存存储中，并具有呈现信息所需的信息。我所有的其他页面都可以工作，我不知道为什么。我也不知该如何处理这个错误。

我试过使用这段代码，但事件监听器似乎没有触发。

});

这是我的工作箱策略

我希望看到我的服务人员检索存储的 api 响应，但它没有并说无法获取。

我按照https://developers.google.com/web/tools/workbox/guides/using-bundlers上的步骤操作，但是dist/sw.js构建后的文件根本没有被 Webpack 处理。所有的 import 语句仍然保持原样，评论没有被删除，也没有被 Terser 丑化。

我做错了什么？应该sw.js先构建为单独的条目，然后将输出传递给插件？

dist/sw.js （实际输出，除了第一行被注入之外，什么都没有处理）

./src/sw.js

webpack.common.js

webpack.prod.config.js

Github 上的相关问题：https ://github.com/GoogleChrome/workbox/issues/1513

我正在使用 Webpack 来编译我的站点，并使用Workbox Webpack 插件来编译 service worker。

尽管 Workbox 创建的清单包含指向正确块名称数组的链接（具有该特定构建的正确哈希），但 Chrome DevTools 似乎并未将块包含在预缓存列表中（DevTools > Application > Cache Storage） .

这是我的插件配置：

shell中有关于不需要包含globDirectory和的警告globPatterns，因为Webpack在编译时已经跟踪文件。但是，根据此处的建议，应通过此配置选项缓存 Webpack 不知道的其他资产。我没有使用webpack-dev-server，而是通过Phoenix框架为该站点提供服务。

查看/service-worker.js从 Workbox 生成的内容，它正在导入一个清单，其中包含对正确块的引用。但它们只是没有被加载到缓存存储中的预缓存中：

可能值得注意的是，DevTools 中的 Network 选项卡确实(ServiceWorker)在Size块名称列中显示。但是当这些脚本没有出现在缓存存储中时，我如何相信这一点？

更奇怪的是，如果我删除对globDirectory和的引用globPatterns，Webpack 块文件确实会出现在缓存存储中。但是，问题在于我有一些 Webpack 不知道我想使用 Workbox 进行预缓存的资产。

使用的插件版本是 4.xx 更高版本的插件不允许使用参数globDirectory和globPatterns.

我正在从 v3 迁移到 v4 ，在我的 vuejs 应用程序中使用 workbox-window(CDN) 和 workbox-webpack-plugin。

它在本地使用 http-server 可以正常工作，但是在部署后，我收到此错误并且无法安装服务工作者。

我该如何解决？