如何在HTML5应用程序缓存中使用特定于页面的图像和共享资源来缓存多个HTML页面?

时间:2012-02-08 15:21:20

标签: html5 browser-cache cache-manifest

在我的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文件,每本书一次?有谁能推荐一个好的解决方案?

1 个答案:

答案 0 :(得分:1)

你的问题不是100%明确,但这是我如何解释它。 您可以为每本书存储2个单独的文件,但存储它会导致您在缓存中写入book.js和book.css twise,因此您需要做的是:

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文件并缓存它们。

相关问题