如何在 HTML5 缓存清单中指定通配符来加载目录中的所有图像?

发布于 2024-12-13 13:46:37 字数 509 浏览 1 评论 0原文

我在应用程序中使用的文件夹中有很多图像。使用缓存清单时,如果我可以指定通配符来加载要缓存的某个目录中的所有图像或文件,维护会更容易。

例如,

CACHE MANIFEST
# 2011-11-3-v0.1.8
#--------------------------------
# Pages
#--------------------------------
../index.html
../edit.html
#--------------------------------
# JavaScript
#--------------------------------
../js/jquery.js
../js/main.js
#--------------------------------
# Images
#--------------------------------
../img/*.png

这可以做到吗?也用 ../img/* 在一些浏览器中尝试过,但似乎不起作用。

I have a lot of images in a folder that are used in the application. When using the cache manifest it would be easier maintenance wise if I could specify a wild card to load all the images or files in a certain directory to be cached.

E.g.

CACHE MANIFEST
# 2011-11-3-v0.1.8
#--------------------------------
# Pages
#--------------------------------
../index.html
../edit.html
#--------------------------------
# JavaScript
#--------------------------------
../js/jquery.js
../js/main.js
#--------------------------------
# Images
#--------------------------------
../img/*.png

Can this be done? Have tried it in a few browsers with ../img/* as well but it doesn't seem to work.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

鹿港小镇 2024-12-20 13:46:37

这会更容易,但它如何运作呢?清单文件是在浏览器中解析和操作的文件,除了您告诉它的内容之外,浏览器对服务器上的文件没有特殊的了解。如果浏览器看到以下内容:

../img/*.png

浏览器应从服务器请求的第一张图像是什么?让我们从这些开始:

../img/1.png
../img/2.png
../img/3.png
../img/4.png
...
../img/2147483647.png

这就是可能存在的带有数字名称的所有图像,半任意地在 231-1。您的 img 目录中存在这 20 亿个文件中的多少个?您真的希望浏览器发出所有这些请求只是为了获得 20 亿个 404 错误吗?为了完整起见,浏览器可能还希望请求所有以零填充的等效项:

../img/01.png
../img/02.png
../img/03.png
../img/04.png
...
../img/001.png
../img/002.png
../img/003.png
../img/004.png
...
../img/0001.png
../img/0002.png
../img/0003.png
../img/0004.png
...

现在浏览器已对大多数不存在的文件发出了超过 40 亿个 HTTP 请求,并且在构建服务器上可能存在的可能文件名。这不是清单文件工作的可行方法。服务器是 img 目录中的文件已知的地方,因此必须在服务器上构建文件列表。

It would be easier, but how's it going to work? The manifest file is something which is parsed and acted upon in the browser, which has no special knowledge of files on your server other than what you've told it. If the browser sees this:

../img/*.png

What is the first image the browser should request from the server? Let's start with these:

../img/1.png
../img/2.png
../img/3.png
../img/4.png
...
../img/2147483647.png

That's all the images that might exist with a numeric name, stopping semi-arbitrarily at 231-1. How many of those 2 billion files exist in your img directory? Do you really want a browser making all those requests only to get 2 billion 404s? For completeness the browser would probably also want to request all the zero-filled equivalents:

../img/01.png
../img/02.png
../img/03.png
../img/04.png
...
../img/001.png
../img/002.png
../img/003.png
../img/004.png
...
../img/0001.png
../img/0002.png
../img/0003.png
../img/0004.png
...

Now the browser's made more than 4 billion HTTP requests for files which mostly aren't there, and it's not yet even got on to letters or punctuation in constructing the possible filenames which might exist on the server. This is not a feasible way for the manifest file to work. The server is where the files in the img directory are known, so it's on the server that the list of files has to be constructed.

孤蝉 2024-12-20 13:46:37

我认为事情并非如此。您必须一一指定所有图像,或者使用一个简单的 PHP 脚本来循环遍历目录并输出文件(当然使用正确的 text/cache-manifest 标头)。

I don't think it works that way. You'll have to specify all of the images one by one, or have a simple PHP script to loop through the directory and output the file (with the correct text/cache-manifest header of course).

·深蓝 2024-12-20 13:46:37

如果浏览器可以请求文件夹列表,这将是一个很大的安全问题 - 这就是 Tomcat 现在默认关闭该功能的原因。

但是,浏览器可以找到与其缓存的页面引用的通配符的所有匹配项。这种方法仍然存在问题(例如,最初未使用但由 JavaScript 动态设置的图像等,并且它要求不仅下载所有缓存项,还对其进行解析)。

It would be a big security issue if browsers could request folder listings - that's why Tomcat turns that capability off by default now.

But, the browser could locate all matches to the wildcards referenced by the pages it caches. This approach would still be problematic (like, what about images not initially used but set dynamically by JavaScript, etc., and it would require that all cached items not only be downloaded but parsed as well).

野心澎湃 2024-12-20 13:46:37

如果您尝试自动化此过程,而不是手动执行。使用脚本,或者像我一样使用 manifestR。它将输出您的清单/应用程序缓存文件,您所要做的就是复制和粘贴。我已经成功地使用了它,通常只需要进行一些更改。

另外,我建议使用带有通配符的网络标头:

NETWORK:
*

例如,这允许通过 JSON 将来自其他链接域的所有资产下载到缓存中。我相信这是唯一可以指定通配符的标头。就像其他人在这里所说的那样,这是出于安全原因。

If you are trying automate this process, instead of manually doing it. Use a script, or as I do I use manifestR. It will output your manifest/appcache file and all you have to do is copy and paste. I've used it successfully and usually only have to make a few changes.

Also, I recommend using the network header with the wild card:

NETWORK:
*

This allows all assets from other linked domains via JSON, for instance, to download into the cache. I believe that this is the only header where you can specify a wildcard. Like the others have said here, it's for security reasons.

春庭雪 2024-12-20 13:46:37

缓存清单现已弃用,您应该使用 HTML 标头来控制缓存。

例如:

<meta http-equiv="Cache-control" content="public">
  • 公共 - 可以缓存在公共共享缓存中。
  • 私有 - 只能缓存在私有缓存中。
  • 无缓存 - 可能不会被缓存。
  • 无存储 - 可以缓存但不存档。

The cache manifest is now deprecated and you should use HTML headers to control caching.

For example:

<meta http-equiv="Cache-control" content="public">
  • Public - may be cached in public shared caches.
  • Private - may only be cached in private cache.
  • No-Cache - may not be cached.
  • No-Store - may be cached but not archived.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文