如何在 HTML5 应用程序缓存中缓存具有页面特定图像和共享资源的多个 HTML 页面？答案

【问题标题】：How to cache multiple HTML pages with both page-specific images and shared resources in the HTML5 application cache?如何在 HTML5 应用程序缓存中缓存具有页面特定图像和共享资源的多个 HTML 页面？
【发布时间】：2026-02-16 06:00:01
【问题描述】：

在我的 HTML5 应用程序中，我有几个代表书籍的 HTML 文件。每本“书”都包含特定于该书的图像。每个书籍文件还包含对所有书籍共享的 CSS 和 JavaScript 文件的引用。

我想将图书缓存在 HTML5 应用程序缓存中，以便在没有互联网连接的情况下查看它们。我想我必须为每个 HTML 书籍文件创建一个清单文件，其中包含对共享资源和书中图像的引用。 HTML 文件中的标签将如下所示：

<html manifest="Book1.appcache">

或：

<html manifest="Book2.appcache">

和 Book1.appcache 类似：

CACHE MANIFEST
Js/Book.js # Shared
Css/Book.css # Shared
Images/Book1-cover.png # Book-specific

和 Book2.appcache 类似：

CACHE MANIFEST
Js/Book.js # Shared
Css/Book.css # Shared
Images/Book2-cover.png # Book-specific

我不确定这种设计，这样似乎每本书都是自己的“应用程序”，但事实并非如此。另外，共享的 CSS 和 JS 文件不是缓存多次，每本书一次吗？谁能推荐一个好的解决方案？

【问题讨论】：

标签： html browser-cache cache-manifest

【解决方案1】：

您的问题不是 100% 清楚，但我是这样解释的。您可以为每本书存储 2 个单独的文件，但这样存储会导致您将 book.js 和 book.css 写入缓存中，因此您需要做的是：

Book1.html：

<html manifest="Book.appcache">
<img src="book1-cover.png">

Book2.html：

<html manifest="Book.appcache">
<img src="book2-cover.png">

Book.appcache：

CACHE MANIFEST
Js/Book.js
Css/Book.css
Book1.html
Book2.html
Images/Book1-cover.png
Images/Book2-cover.png

所以你只需制作 2 个单独的 html 文件并缓存它们。

【讨论】：

确实，我的问题不是 100% 清楚。这些书是由拥有不同浏览器的不同人创建的。您的方法可能是唯一可行的方法。它的缺点是（如果我是正确的）一旦将新书添加到清单文件中，其他书的缓存就会被标记为“过期”并由浏览器自动更新。
我一直（自动）将新内容添加到我的清单文件中，但所有内容仍然显示，就像它应该很难......试一试吧:)
@Jeroen 我似乎犯了一个错误，仅在您的索引页上才需要包含清单（刚刚通过并注意到：p）