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

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

缓存/和/index.html有点令人困惑，但从服务工作者的角度来看，它们是不同的URL。 Web服务器当然通常配置为提供相同的文件（index.html），无论您访问哪个URL，但如果您询问SW，它们是分开的，并且应该在缓存中有单独的条目。这可以轻松测试：部署缓存/但不是/index.html的内容（即使Web服务器从/提供index.html）并尝试在脱机模式下访问/index.html。没有运气。

如果您完全确定您的网络应用程序从未向其发出任何请求，我认为没有任何理由可以缓存/index.html。如果您的网络应用程序只知道/然后离开/index.html应该完全没问题。我自己测试了它，它完美无缺。如果有人有关于此事的更多信息，请纠正我！

需要注意的事项可能很有用：SW可能配置为将/和/index.html视为相同。因此，无论何时请求任何一个都可以进行缓存/服务。我猜有些库内置了这种功能。

Answer 2

基于上面的回答：sw-precache和sw-toolbox是实现Service Workers时通常建议的两个库，因为它们允许使用此通配符功能。

对于ServiceWorker cache.addAll（），URL如何工作？

2 个答案: