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



在我的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文件不是缓存了多次,每本书缓存一次吗?有人能推荐一个好的解决方案吗?

您的问题不是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

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

相关内容

  • 没有找到相关文章

最新更新