javascript - 从 Service Worker 获取主页 URL

Question

我正在尝试从 AppCache 迁移到大型框架的 Service Worker(Construct 2 - 请参阅 www.scirra.com)。很容易找到有关如何使用 Service Worker 缓存资源列表然后在 fetch 事件中响应缓存条目的示例。但是，我发现 AppCache 有两个特性很难用 Service Worker 复制:

1. 主页的自动缓存。
2. 在主页加载时通过请求单独的文件 (offline.json) 来检查更新。

这两个都需要识别索引页(#2 会在请求索引页的同时检查更新)。然而，我发现自己陷入了看似不雅的解决方案。请注意，如果请求“foo/”，许多服务器会返回“foo/index.html”，但其他服务器不会，还有一些服务器使用动态路径，因此我无法列出任何硬编码的主页 URL。我必须通过当前页面的 URL。

对于 #1，我在“安装”事件中使用 skipWaiting()，在“激活”中使用 claim() 客户端，clients.matchAll() 迭代每个客户端，然后将 client.url 添加到缓存中。好像有点啰嗦，难道没有办法在install事件中获取主页URL吗？

对于 #2，我必须在每个获取事件中调用 clients.matchAll() 并测试当前请求 URL 是否与任何客户端 URL 匹配。如果它是主页，我检查更新，否则正常处理。这看起来真的很不优雅，因为在页面加载时发生的数百个获取请求中的每一个都必须不断获取所有客户端的列表并匹配他们的 URL。

难道没有更好的方法从 service worker 获取主页的 URL 吗？

Answer 1

我建议加入 sw-precache进入您的构建过程。它会为您生成一个服务 worker 脚本，负责预缓存您关心的资源，并在构建过程中检测到更改时维护缓存(更新/添加/删除)条目。

有 some support在 sw-precache 中用于预缓存依赖于多个底层模板文件的 URL，但您也可以将 sw-precache 与 additional runtime service worker 结合使用逻辑。 sw-toolbox是一个很好地补充 sw-precache 并实现各种运行时缓存选项的库。

即使您不直接使用 sw-precache，您也可以在自己的 service worker 中遵循以下从其代码中提取的一些模式:

• Add如果请求 URL 以 / 结尾，则将索引文件(如 index.html)添加到请求 URL。 (在服务 worker 中使用 Cache Storage API 时，规范化用作键的 URL 始终是个好主意。)

• 依靠service worker lifecycle触发缓存管理而不是获取带外“ list ”。当您的浏览器注意到您的 service worker 脚本发生变化时，它会触发一个 install 事件让您有机会缓存​​新条目，并触发一个 activate 事件给您一个机会做缓存清理。这意味着只要您的缓存条目发生更改，您的底层服务 worker 脚本就会更改。一种直接但容易出错的方法是包含一个 version string在您的服务 worker 脚本中内联。一种不太容易出错的方法是在您正在缓存的基础资源发生变化时自动修改您的服务 worker 脚本，这就是 sw-precache 为您所做的。在您的受控页面中，您可以 listen for specific service worker lifecycle events并显示“有新内容可用；请刷新!”消息之类的。