javascript - 对于 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 接口(interface)的 addAll() 方法接受一个 URL 数组，检索它们，并将生成的响应对象添加到给定的缓存中”。这不是很有帮助。

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

稍后添加

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

Answer 1

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

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

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

注意一些可能有用的事情:SW 可以配置为将/和/index.html 视为相同。因此，只要请求其中一个，就可以缓存/并提供服务。我想有些库内置了这种功能。