对于 ServiceWorker cache.addAll()，URL 是如何工作的？

Question

我看到很多这样的示例代码：（this Mozilla Doc 的略微缩短的版本）

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/gallery/',
        '/sw-test/gallery/bountyHunters.jpg',
      ]);
    })
  );
});

我不明白你为什么要同时添加/sw-test/ 和 /sw-test/index.html。似乎第一个文件夹 URL 应该自动加载下面的所有内容，或者，如果它不这样做，为什么它在那里？ /sw-test/gallery/ 和 /sw-test/gallery/bountyHunters.jpg 相同。

文档说“Cache 接口的 addAll() 方法采用 URL 数组，检索它们，并将生成的响应对象添加到给定的缓存中”。这不是很有帮助。

我真正想做的是缓存几个文件夹中的所有 *.html 文件和另一个文件夹中的所有图像文件（各种格式）。一个一个地列出它们很脆弱（很快就会不同步），容易出现拼写错误，而且很愚蠢。

稍后添加

进一步阅读后，似乎不存在通配符，所以很愚蠢。 :-) 但是添加像/sw-test/ 这样的文件夹有什么意义呢？

Answer 1

是的，通配符不存在，当您想到它时，这实际上是完全合理的：Web 服务器不会公开在路径（例如 /gallery/）中找到的文件，那么浏览器如何缓存它不知道名称的文件？ Web 服务器当然可以配置为公开路径的目录列表，但浏览器本身没有任何能力“从该路径 x 获取所有内容”。目录/索引列表只是一堆 HTML，而不是任何文件的映射。

同时缓存 / 和 /index.html 有点令人困惑，但从 Service Worker 的角度来看，它们是不同的 URL。 Web 服务器通常配置为服务相同的文件 (index.html)，无论您访问哪个 URL，但如果您询问 SW，它们是分开的，并且应该在缓存中具有单独的条目。这可以很容易地测试：部署缓存 / 但不缓存 /index.html 的东西（即使 Web 服务器从 / 提供 index.html）并尝试在离线模式下访问 /index.html。没有运气。

如果您完全确定您的网络应用永远不会向它发出任何请求，我认为根本没有任何理由缓存 /index.html。如果您的 Web 应用程序只知道 /，那么将 /index.html 排除在外应该完全没问题。我自己对此进行了测试，并且效果很好。如果有人对此事有更多的信息，请纠正我！

需要注意的一点可能有用：SW 可以配置为将 / 和 /index.html 视为相同。因此，只要请求任何一个，就可以缓存 / 并提供它。我猜有些库内置了这种功能。

Answer 2

基于上面 pate 的回答：sw-precache 和 sw-toolbox 是实现 Service Worker 时通常推荐的两个库，因为它们允许使用这种通配符功能。