我正在使用 VUE PWA，并且正在尝试添加自己的服务人员。

检查 VUE 使用 sw-precache 插件工作服务工作者，所以我试图导入我的文件，所以当构建完成后我添加它并且可以工作我自己的服务工作者，但它总是向我发送错误：

获取脚本时收到错误的 HTTP 响应代码 (404)。service-worker.js:1 未捕获

（匿名）@ service-worker.js:1

（索引）：1 Service Worker 注册期间的错误：TypeError：无法注册 ServiceWorker：ServiceWorker 脚本评估失败

我的文件 custom-service-worker.js 我在 src / 中声明了它，我也在静态文件夹和根目录上尝试过

这是我在 sw-precache 插件中修改的代码：

有谁知道如何实现它？

有没有办法使用sw-precache, 来缓存您当前所在的 url 而无需在 中准确指定 url 字符串dynamicUrlToDependencies？当我提供特定的相对 url 时，我的页面会缓存/dynamic/url-circle，但如果我只提供/. 我假设发生这种情况是因为我的网址是http://localhost:3000/dynamic/url-circle，而不仅仅是http://localhost:3000/。我需要它适用于任何 url 字符串，因为我不知道dynamic/（例如/dynamic/url-triangle，/dynamic/url-square）之后的确切 url。是否有任何抽象或字符串模式可用于dynamicUrlToDependencies？或者我可以使用其他解决方案吗？

前任：

这是我sw-precache在 Gruntfile 中的设置：

我只找到了两个接受这个插件的选项，它们是 cacheFirst 和 networkFirst，但我找不到 Cache then network 来获取更新的选项。

服务人员注册成功，但我仍然在 chrome 中收到上述错误。

过去几天我一直在阅读关于这个主题的 SO 帖子和 Github 问题，但我似乎仍然找不到适合我的设置的组合。希望有人可以指出我的具体解决方案。这是正在发生的事情。

我正在使用 create-react-app v2 和sw-precache. 构建通过 CircleCI 将新文件推送到 S3，而 S3 又从 CloudFront 提供服务。构建的最后一步是使之前的 CloudFront 分配无效。

我遇到的问题是，当部署新构建并更新服务工作者时，下一页加载会引发错误，因为服务工作者提供的捆绑文件不再存在。再说一遍，我可以加载站点，www.example.com但如果我打开一个新选项卡并加载，www.example.com/test我会收到未捕获的语法错误。

关于我的设置的一些注意事项。

1. 我在 CloudFront 中创建了一个设置Minimum and Maximum TTL为service-worker.jsto的行为0。

2. 对于我sw-precache-config.js的，这是我的设置：

3. 当我在构建后加载第一页时，对于 index.html，我看到以下响应：Status Code: 200 OK (from ServiceWorker)

我的假设是我希望 service worker 不缓存 index.html 文件。但如果我这样做，我会不会失去我的离线功能？我是否应该为 index.html 设置一个 runtimeCachingnetworkFirst以便我可以随时请求它但在离线时回退到缓存？如果是这样，那会是这样吗：

我尝试过但对我不起作用的一些事情包括在发生这种情况时向用户显示一条消息以重新加载（技术上可行，但用户体验不是最佳的）。还查看了skipWaiting: false选项，但在新版本中一直看到相同的错误。

我们正在使用 Workbox 来预缓存“下一个”页面的一些资产，但我们的资产 URL 包含部署的日期和哈希值。例如“/css/2019-05-15/f00ba5/home.css”。

我们面临的问题是如何将 URL 的变化部分（“2019-05-15/f00ba5”）传递给 service worker，并使 Workbox 预缓存资产列表。

我们正在使用 Workbox，我们尝试使用 workbox-window 从网页向 SW 发送消息，直到这里......它成功了！

但是现在 SW 知道哈希，我们不知道如何利用它，因为如果我们从事件侦听器内部调用 workbox.precaching.precacheAndRoute() 方法，workbox.precaching 模块的导入会以某种方式失败.

在 page.html

在 service-worker.js

我得到错误

我希望它能够工作并预缓存precacheManifest数组中的文件。

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

https://nikudu.com/

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

我很欣赏这个问题可能有点“基于意见”，但是，我认为一个通用的答案可以在未来帮助其他有兴趣了解更多关于 PWA 和 Service Worker 的人。

背景

我在网上搜索过，并惊讶地发现没有明确描述在选择要由 Service Worker 为 PWA 预缓存的文件时的最佳实践是什么。

有各种文章/文档概述了预缓存的作用及其工作原理（有关更多信息，请参见此处），但没有一个给出“常见做法”的示例。

问题

在标准的渐进式 Web 应用程序中，通常会预缓存哪些文件？

我目前在做什么...

为了确保我的应用程序尽可能离线运行，我预缓存了以下所有文件：

• 模板（我的index.html应用是 Vue SPA）
• 所有 JS 文件（包括来自动态导入的 JS）
• 所有 CSS 文件（只有一个）
• 网络清单
• 应用程序使用的任何自定义字体
• 任何需要的语言文件（这是动态的，即只会预缓存当前访问者的语言）
• 所有应用程序图标（请参阅下面的列表）
• 所有启动画面（见下面的列表）

就我而言，这大约是 2MB（一旦应用程序完成，可能会增加）

应用程序图标细分

• android-chrome-192x192.png
• android-chrome-512x512.png
• 苹果触摸图标 120x120-precomposed.png
• 苹果触摸图标 120x120.png
• 苹果触摸图标 180x180-precomposed.png
• 苹果触摸图标 180x180.png
• apple-touch-icon-72x72-precomposed.png
• 苹果触摸图标 72x72.png
• 苹果触摸图标precomposed.png
• 苹果触摸icon.png
• 图标_128x128.png
• 图标_144x144.png
• 图标_152x152.png
• 图标_192x192.png
• 图标_384x384.png
• 图标_512x512.png
• 图标_72x72.png
• 图标_96x96.png
• favicon-16x16.png
• favicon-194x194.png
• favicon-32x32.png
• favicon.ico
• mstile-144x144.png
• 野生动物园固定tab.svg

启动画面的分解

• 飞溅-1125x2436.png
• 飞溅-1242x2148.png
• 飞溅-1536x2048.png
• 飞溅-1668x2224.png
• 飞溅-2048x2732.png
• 飞溅-640x1136.png
• 飞溅-750x1294.png

问题

是否可以使用不同的策略预缓存文件？即在重新验证时过时？

或者，我应该只在 DOM 中加载脚本，然后使用正确的策略在 worker 中为其添加路由吗？

背景

这是一个非常奇怪的案例，所以我会尽力解释它......

• 我们有两个回购；PWA和游戏
• 两者都静态托管在同一个 CDN 上
• 由于 Games repo 是独立的，PWA 无法访问游戏 js 包的版本控制
• 因此，我想出的解决方案是game-manifest.js在 Games 构建中生成一个未版本化的清单 ( )
• 然后，PWA 将预缓存此文件，遍历其内容，并将每个条目附加到现有的预缓存清单
• 但是，鉴于game-manifest.js没有修订并且没有散列，我们需要应用Network First或Stale While Revalidate策略，以便在新版本可用时更新文件

请参阅以下代码作为我正在尝试做的更清晰的示例：

我正在尝试预缓存路由。我已成功使用预缓存主页

这与主页的路线相匹配

我还有其他顶级路线我想匹配但不知道如何匹配。

我如何为上述编写正则表达式