问题标签 [workbox-webpack-plugin]

在某些情况下，应用程序可能需要相对较大的资源作为严格要求，但仅在某些情况下，服务工作者不容易检测到。例如：

• Safari 具有 Web Audio API 的前缀和不一致的实现。我找到了一个很棒的垫片，但它超过了 300kb。Web 应用程序在 Safari 中运行非常重要，但在其他浏览器中则不需要。
• 某些媒体有多种格式，可能并不总是受支持。视频通常太大而无法预缓存并且存在范围请求问题，但它可以应用于 WebP 图像或短音频文件（例如 Opus 与 AAC）。如果您在预缓存清单中包含所有格式，默认情况下它将下载所有格式。

一种方法是从预缓存清单中手动排除某些文件，然后有条件地从主线程上的脚本加载这些文件以存储在运行时缓存中。但是这些文件不会被预先缓存——它们只会在新版本激活后加载，此时您可能不再在线。

是否有允许以下内容的解决方案？：

• 让 service worker 向主线程发送一条消息，其中包含检查各种条件的“测试”脚本的 URL。
• 在主线程上加载并运行该脚本，并向服务人员发送所需条件资产的列表
• 将这些资产添加到预缓存清单中，以便与以前的版本进行比较并根据需要下载
• 在加载所有预缓存资产（包括条件资产）之前，服务工作者不应切换到新版本。

我正在尝试了解工作箱和服务人员。

使用 workbox-webpack-plugin 和 GenerateSW 模式时，用于预缓存资产的工作箱策略是什么？IE。cacheFirst、staleWhileRevalidate 等。因为我似乎没有为预缓存资产设置路由/策略，以便服务人员更新这些资产的缓存。那么这些的默认处理程序是什么？

其次，来自服务器响应的 Cache-Control 标头如何在工作箱策略中发挥作用以刷新资产？如果有的话。

回答根 /index.html 资产的问题对我最有帮助。

谢谢。

是否有理由为两个和插件[/\.map$/, /^manifest.*\.js(?:on)?$/]的exclude选项设置默认值？GenerateSWInjectManifest

我有几个关于服务人员和工作箱的问题。

1) 何时在 webapp 中注册 service worker。* 如果我直接在 index.html 中注册，如果我有预缓存资产，那么在第一次绘制时，预缓存资产将通过请求下载两次，一次通过工作箱下载，这会延迟第一次绘制。

2) 在我的 webapp 中，我们很快就使用了很多 3rd 方 js、css、gif。所以在我的路由中，如果我想为每个请求缓存它们，如果注册一个路由器，它似乎很复杂，所以尝试使用正则表达式模式，所以如果我需要从缓存中排除某些图像格式，任何人都可以建议最好的正则表达式来缓存它们。所以缓存第三方js、css、api命中等其他格式的最佳方式。

3) 最好的清除缓存的方法，一种是使用过期和全部。但在我的情况下，如果用户更改他的位置，我需要清除一些缓存内容，那么我该如何实现这一点。

4) 何时使用缓存以及何时使用 indexeddb ？

5）使用workbox-webpack插件然后直接使用workbox的优点。有什么主要优势吗？

6）注册/注销/更新服务工作者的最佳实践？

7) 如果我使用 workbox-webpack 插件和动态路由来缓存 js/css 文件，那么对于每个构建更改，都会生成具有不同哈希的 js/css 文件并将其缓存，因此服务工作者缓存具有不同哈希值的相同文件.

8) 强制删除缓存名称和缓存中单个文件的最佳方法。

无论预缓存的数据如何，我每次离线时都需要显示一个自定义离线页面。

我正在使用create-react-app和workbox-webpack-plugin

我尝试更改NavigationFallback为，offline.html但每次我在离线时重新加载页面时，它都会显示index.html页面并且不显示offline.html。

有人可以帮我添加自定义离线后备页面吗？

包.json

}

我在使用“workbox.strategies.staleWhileRevalidate”时遇到问题，我没有得到更新的数据和响应。有没有办法使用这种策略更新每个请求的数据？我也在使用广播更新来检查标题，但是当我使用不同的终端登录时，它会显示旧数据。我希望我的 indexdb 应该随着每个请求而更新，并且根据更新的响应显示 dom。

我有一个在本地主机上运行良好的软件，但不能从在线缓存中获取。像往常一样它工作正常，但不知何故它停止了。

文件被缓存，但请求总是去网络。我已经检查了开发工具上的文件。

我也不确定缓存过期设置。

你可以在这个网站上在线看到它：

以下是相关代码：

registerServiceWorker.js

服务工作者的分发代码如下。您可能会看到使用 cacheFirst 策略的在线版本，因为我尝试了这两种策略。

我正在尝试使用工作箱创建一个 webpack 构建器，因为我可以看到 Vue CLI 3 正在使用。在我的 package.json 文件中，我创建了一个“build”来构建和编译文件，并创建了一个“dev”来运行它。

我使用InjectManifestfromworkbox-webpack-plugin来处理我的webpack.config.js文件中的构建。我尝试了不同的选择来看看他们做了什么。

webpack.config.js

当我构建项目时，我创建了以下文件：

index.html 文件仅将 app-e8d91....js 文件添加为脚本，而不会使用预缓存的清单文件和服务工作者，这导致我的本地主机没有服务工作者。

我有一个 registerServiceWorker.js 文件，它在 injectManifest 插件中被引用。

registerServiceWorker.js

如何让我的构建创建并添加 service worker + manifest.json 文件，以便它可以在 localhost 上工作并且也可以离线工作？

文件结构：

我正在使用workbox-webpack-plugin，下面是 webpack 配置中的代码

以下是根据谷歌文档重新验证策略时的陈旧流程

我从跨域调用 API，我观察到每次响应不是从缓存而是从网络调用响应返回给 UI。

我期待第二次调用相同的 API 时，我应该从缓存中获取响应，然后缓存应该从网络调用的响应中更新。

使用以下 vue.config.js：

构建期间的验证错误是“skipWaiting”和“clientsClaim”不是受支持的参数。为什么？swSrc 来自此处列出的相同选项列表，并且构建不会抱怨该选项。当我删除这两个选项时，构建工作。

所以我想我的问题是：

skipWaiting，clientsClaim是什么“不支持的参数” ？网络包？PWA 插件？workbox-webpack 插件？我在哪里可以找到正确的选项集？谢谢。

更新：我没有设置 NODE-ENV 的 .env 文件。但是，我猜只有在删除 2 个选项时才能npm run build构建生产资产。dev ( ) 中删除的选项不会产生服务工作者文件。npm run serve