对于 ServiceWorker cache.addAll()，URL 是如何工作的? [英] For ServiceWorker cache.addAll(), how do the URLs work?

问题描述

我看到很多这样的示例代码:(此 Mozilla 文档)

I see a lot of example code like this: (Slightly shortened version of 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 相同.

I don't understand why you add both /sw-test/ and /sw-test/index.html. Seems like either the first folder URL should autoload everything underneath, or, if it doesn't do that, why is it there? Same for /sw-test/gallery/ and /sw-test/gallery/bountyHunters.jpg.

文档说Cache 接口的 addAll() 方法采用一组 URL，检索它们，并将结果响应对象添加到给定的缓存中".这不是很有帮助.

The docs say "The addAll() method of the Cache interface takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache". Which isn't very helpful.

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

What I really want to do is cache all the *.html files from a few folders and all the image files (in various formats) from another folder. Listing them one-by-one is fragile (will quickly get out-of-sync), prone to typos, and is just plain silly.

稍后添加

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

After further reading, doesn't seem like wildcards exist, so silly it is. :-) But whats the point of adding a folder like /sw-test/?

推荐答案

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

Yes, a wildcard doesn't exist and that's actually completely reasonable when you come to think of it: the web server doesn't expose the files found in a path (eg. /gallery/) so how could the browser cache files that it doesn't know the names for? A web server can of course be configured to expose the directory listings of a path but browsers themselves don't have any ability to "take everything from this path x". The directory/index listing is just a bunch of HTML, not any mapping of files or so.

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

Caching both / and /index.html is a bit confusing but from the Service Worker's standpoint they are different URLs. The web server is usually of course configured to serve same file (index.html) whichever URL you visit but if you ask the SW, they are separate and should have separate entries in the cache. This can be tested easily: deploy something that caches the / but not /index.html (even though the web server serves index.html from /) and try to visit /index.html in offline mode. No luck.

如果您完全确定您的网络应用程序从不向它发出任何请求，我认为根本没有任何理由缓存/index.html.如果您的网络应用程序只知道/那么离开/index.html 应该是完全没问题的.我自己测试过这个，它工作得很好.如果有人有更多关于此事的信息，请纠正我！

I don't think there's any reason at all to cache /index.html if you are completely sure your web app never makes any requests to it. If your web app only knows of / then leaving /index.html out should be completely fine. I've tested this myself and it works perfectly. If someone has more information on the matter, please correct me!

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

Something to note that could be useful: the SW may be configured to treat / and /index.html as the same. So caching / and serving it whenever either one is requested is possible. I guess some of the libraries has this sort of functionality built-in.

这篇关于对于 ServiceWorker cache.addAll()，URL 是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！