问题标签 [workbox-webpack-plugin]

我正在使用 Workbox Webpack 插件 (v4.3.1) 来生成服务工作者脚本和 Workbox-Window (v4.3.1) 插件来注册它。

在开发环境（我使用 webpack 开发服务器）上一切正常，但是在生产版本中，我在 Chrome（v78）开发控制台上收到以下错误：

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:4321/') with script ('http://localhost:4321/undefined'): A bad HTTP response code (404) was received when fetching the script.

（注意：我使用本地 Nginx 服务器来测试我的生产版本）

我像这样使用 Workbox Webpack GenerateSW：

我确认，在构建之后，会生成服务工作者脚本 (service-worker.js) 并且它在 dist 文件夹中。

我正在使用 Workbox-Window 插件来注册上述服务工作者脚本：

我猜这个问题与我使用 Nginx 测试产品构建的事实无关，也与提供给 Workbox 构造函数的服务工作者脚本的 url 或路径无关，因为使用 ServiceWorker Web API 而不是 Workbox Window API ，它工作正常：

为什么在完全相同的条件下，使用 Workbox Window API 注册 Service Worker 失败？undefined您可以在错误日志中看到的那个是从哪里来的？？？

* 编辑 *我在 Workbox GitHub repo 上打开了一个问题。你可以在这里找到它。

我开始使用webpack-workbox-plugin注入. 我的是一个跑过来的。service workerapplicationprojectASP.NET Core web applicationIIS Express

这是我的发展 webpack config file：

这是我调用的函数main.js：

但是当我运行时application，client找不到sw.js文件，因为它已分配webpack dev server path，所以不在IIS Express app path.

DevTool留言：

有什么办法可以解决它？谢谢

我正在尝试通过next-offline使用Workbox正确实现 Service Worker 。为了创建一个自定义服务工作者，我使用了workbox-webpack-plugin 的InjectManifest类。我在设置开发环境以运行“now dev”命令时遇到问题。

我目前的尝试在这里：https ://github.com/awb305/nextjs-service-worker-workbox 。

这是我的问题：

1. 安装失败

运行“now dev”时，我的 SW 将无法安装和记录：

除非我在 now.json 文件中添加以下重定向：

这解决了 bad-precaching-reponse，但是我还没有在其他地方看到这个实现，所以我对这种方法没有信心。确保正确安装软件的标准方法是什么？

2. Webpack 警告

在我的第一个问题中使用我的修复程序运行“now dev”时，我将收到以下警告：

目前我唯一的解决方法是在我的 next.config.js中切换generateInDevMode配置。如果我想安装一个新的服务工作者，我必须使用generateInDevMode: true运行一次“now dev” 。然后我杀死“now dev”并设置generateInDevMode: false以防止显示先前的警告。理想情况下，我宁愿不这样做。

我尝试将我的 webpack 配置设置为：

然而，这并没有消除警告。

我很难找到这个错误。反正有更多的错误浮出水面吗？我是否错误地设置了 webpack watch 配置？

我正在使用以下策略来缓存图像：

我没有定义任何其他特定策略。

当我在index.html包含 Giphy 托管的 Gif 中尝试它时：

只要我在线，Worbox 似乎就可以正确缓存

使用 CacheFirst 响应“ https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif ”

如果我禁用我的 wifi 并尝试离线刷新我的页面，我会遇到以下错误：

“ https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif ” 的工作箱网络请求引发错误。类型错误：获取失败

未捕获（承诺）无响应：该策略无法为“ https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif ”生成响应。基础错误是 TypeError: Failed to fetch。在 CacheFirst.makeRequest ( https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-strategies.dev.js:180:15 )

获取https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif net::ERR_FAILED

因此，我错过了什么吗？我应该配置更多东西来缓存 Giphy gif 吗？或者它实际上是一个错误？还是解决不了的问题？

任何帮助表示赞赏，在此先感谢您

我刚刚为我的项目设置了服务人员。我的webpack.config.js样子如下...

我package.json的设置是这样的......

我可以通过将以下代码添加到我的index.js文件中来成功注册工作人员...

但是，现在我不知道在哪里定义我的端点。我想在我的应用程序的某处定义以下代码，但我不知道如何确保调用端点......

如果我运行文件会在我npm build的文件夹中生成，所以我尝试在那里添加端点。但是当我之后运行时，该端点永远不会被调用并且文件也消失了（我猜它被捆绑在某个地方）。有人可以向我解释我做错了什么吗？我需要在哪里定义我的端点以及如何调用它们？sw.jsdistnpm start

从 v5 开始，workbox 会生成一个非常有用的运行时包。我无法找到一种方法来指定捆绑包的位置。默认情况下，它位于 service worker 文件旁边，但我们需要它位于 CDN 上。这可能吗？

我正在使用带有 InjectManifest 插件的 workbox-webpack-plugin v5（最新版本）。以下是我的服务工作者源文件：

我有以下问题/问题：

• 缓存组不正确。除了 google 字体之外的所有内容都在workbox-precache-v2或app-precache-install-time-v1缓存组下，而不是单个缓存组，例如css-cache-v1, js-cache-v1. 但是，20 次中有 1 次显示正确的缓存组，我就是不知道为什么。
• 谷歌字体从内存缓存中显示。这是对的吗？它在离线状态下工作正常，但如果用户关闭浏览器/机器并返回离线模式会发生什么？
• '/app-shell.html' 的用法正确吗？它是一个快速后端应用程序，其中 * 作为所有路由的通配符，React Router 处理路由。从功能上讲，它可以离线工作。我没有任何 app-shell.html 页面。

谢谢你的帮助。

问题如下（来自 ServiceWorkers API 的一些限制）： ServiceWorkers API 目前不支持导入 ES6（在 Chrome 80 中会，但在当前稳定版本 79 中不支持。这意味着需要更多人们更新手机和浏览器的时间超过一年）。

我必须导入一些将在 ServiceWorker 中使用的自定义 ES6 类。

使用它的默认配置，Quasar 将在运行时提供一个/service-worker.js文件，quasar dev或者在运行时构建一个文件quasar build。Quasar 可能会自动转换您的文件custom-service-worker.js，但遗憾的是它不会。以下段落解释了为什么不这样做。

（更具体地说，我正在构建一个 PWA。）Quasar 的坏处在于它为此目的在GoogleChrome/workbox内部使用（Workbox 的功能对项目来说非常好，但正如大多数 Google 产品所发生的那样，它的支持很差，它有 1 -2 大缺点）。请参阅：https ://github.com/GoogleChrome/workbox/issues/1513 所以，Quasar 在幕后使用他们的workbox-webpack-plugin. 它由名为 GenerateSW 和 InjectManifest 的两个类组成。 它们都不能以从 ES6 到 ES5 的自动转换的方式进行配置。

我的解决方案显然是创建另一个 NPM\Webpack 配置并使用它来构建这些文件，而不会以任何方式干扰 Quasar 的配置。

后者的主要缺点是，我必须手动构建（在 Quasar 之外）我在 ServiceWorker 中导入的这些自定义 ES6 类（在它们被转译之后）。即它打破了Quasar 的自然流程（例如只使用qasar devand quasar build），并且这些文件将在很长一段时间内处于积极开发中（因此会大大阻碍开发）。

我发现很难找到重新配置的起点。配置 Webpack 非常复杂，我没有太多时间去修改它，所以 Quasar 的上下文使它变得更加复杂。

如何让 Quasar 编译特定的 ES6 JavaScript 文件并以它的服务方式为它们提供服务app.js，client-entry.js以及import-quasar.js？有没有这样的方法（如果有它会立即解决我的问题workbox-webpack-plugin）？关于 Quasar 或 Webpack 的任何建议？

I have installed workbox-cli

and using the config below, located in config.js

and then running

I get

Your configuration is invalid:

{ "webpack": function(config, env) {\n config.plugins.push(\n new InjectManifest({\n >globPatterns: ['**/*.{js,css}'],\n swSrc: path.join('public', 'custom-service->worker.js'),\n swDest: 'service-worker.js',\n maximumFileSizeToCacheInBytes: >5000000,\n })\n );\n return config;\n }, "swDest" [1]: -- missing -- }

[1] "swDest" is required

I am not sure what else to do because I am providing swDest

正如我们现在在工作箱的第 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