从 Service Worker 获取主页 URL

Question

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

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

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

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

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

有没有更好的方法从服务人员那里获取主页的 URL？

Answer 1

我建议将sw-precache 合并到您的构建过程中。它会为您生成一个服务工作者脚本，该脚本将负责预先缓存您关心的资源，并在构建期间检测到更改时维护缓存（更新/添加/删除）条目。

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

即使您不直接使用sw-precache，以下是从其代码中提取的一些模式，您可以在自己的服务工作者中遵循：

• Add 一个索引文件，如 index.html，如果请求 URL 以 / 结尾。 （在 Service Worker 中使用 Cache Storage API 时，将您用作键的 URL 标准化总是一个好主意。）

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