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

Question

我看到很多这样的示例代码：（此 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 服务器通常配置为无论您访问哪个 URL 都提供相同的文件 (index.html)，但如果您询问软件，它们是独立的，并且应该在缓存中具有单独的条目。这可以很容易地测试：部署一些缓存 / 但不缓存 /index.html 的东西（即使 Web 服务器从 / 提供 index.html），并尝试以离线模式访问 /index.html。没有运气。

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

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