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

Posted 2023-02-23

【中文标题】如何在 HTML5 缓存清单中指定通配符以加载目录中的所有图像？

【英文标题】：How do I specify a wildcard in the HTML5 cache manifest to load all images in a directory?

【发布时间】：2011-12-21 12:28:27

【问题描述】：

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

例如

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

这可以吗？已经在几个浏览器中使用../img/* 尝试过，但它似乎不起作用。

【问题讨论】：

注意： 在 2017 年，Service Worker API 正在迅速取代 AppCache，浏览器开始忽略 .manifest 文件 - Firefox 44 甚至建议在找到.manifest 文件时的控制台。

【参考方案1】：

我不认为它是这样工作的。您必须一一指定所有图像，或者使用一个简单的 php 脚本来遍历目录并输出文件（当然要使用正确的 text/cache-manifest 标头）。

【讨论】：

实际上，通配符可以工作如果您允许目录列表，即如果您浏览到 ...mysite.com/img/ 并且您会获得目录中所有文件的列表目录。我花了下午的大部分时间试图弄清楚为什么该站点在我的开发机器（允许目录列表）上运行，但在我的测试服务器（不允许列表）上运行。但是，出于安全原因，大多数服务器禁用目录列表......

@JvO：有趣！我不知道。您可以编辑我的答案以包含它吗？我会接受你建议的编辑（你也会从中得到几分：P）

【参考方案2】：

这会更容易，但它是如何工作的？清单文件是在浏览器中解析和操作的东西，除了您告诉它的内容之外，它对您服务器上的文件没有特殊的了解。如果浏览器看到这个：

../img/*.png

浏览器应该从服务器请求的第一张图片是什么？让我们从这些开始：

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

这就是所有可能以数字名称存在的图像，半任意地停在2³¹-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 目录中文件的位置，因此必须在服务器上构建文件列表。

【讨论】：

好吧，当浏览器向服务器发出初始请求时，它只会查看公开可用的图像目录并在该目录上列出目录。这将返回它可以看到的文件列表。然后它只将扩展名为 .png 的文件下载到浏览器/客户端。通过从 0 - 万亿个文件名的可能性中查询服务器，无需猜测可能会调用什么文件。

@zuallauz 假设图像目录是公开可用的，这与我所说的并没有什么不同：“服务器是 img 目录中的文件已知的地方，所以它在服务器上必须构建文件列表”，除了公开可用的图像目录返回的文件列表没有标准格式供浏览器解析，但清单文件有标准。

如果没有文件夹/目录列表，您可能会说“缓存已在此请求中加载并与我指定的文件夹匹配的任何文件”所以不是该文件夹中的任何图像，而是任何图像页面已引用。

【参考方案3】：

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

但是，浏览器可以将所有匹配项定位到它缓存的页面引用的通配符。这种方法仍然存在问题（例如，最初未使用但由 JavaScript 动态设置的图像等情况如何，并且它要求不仅下载所有缓存项目，还需要对其进行解析）。

【参考方案4】：

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

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

NETWORK:
*

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

【讨论】：

你是错了！缓存清单文件中NETWORK:部分标题下列出的文件是需要连接到服务器的白名单资源。

【参考方案5】：

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

例如：

<meta http-equiv="Cache-control" content="public">

公共 - 可以缓存在公共共享缓存中。 私有 - 只能缓存在私有缓存中。 No-Cache - 可能不会被缓存。 No-Store - 可以缓存但不存档。