HTML5缓存 - 是否可以为单个URL提供多个不同的缓存?

时间:2011-10-20 23:39:06

标签: html html5 caching cache-manifest

每个URL都可以链接到单个缓存清单。但我想要一些链接到同一URL的缓存清单。原因如下:

我想要缓存的一些文件很少更新和大。 因此,每次缓存更新时,这些大文件都会重新下载,即使它们可能没有被更改。 所以我想拆分缓存。一个用于论文的缓存很少更新大文件,而另一个缓存用于经常更新的光文件。

你们有没有想过如何拆分HTML5缓存?

7 个答案:

答案 0 :(得分:9)

最有效的方法是:

a)在清单的CACHE部分中提到的所有资源上使用远期到期日期(max-age),并为CACHE部分中的每个文件添加时间戳后缀,例如:

CACHE:
menu_1355817388000.js
toolbar_1355817389100.js

b)当上述任何文件在服务器上发生更改时,重新生成/更新清单以更改时间戳。下次只会下载具有修改时间戳的文件。完成任务。

注意:在浏览器中重新加载页面两次,因为第一个刷新浏览器只下载清单并使用旧的缓存资源来绘制页面。这样做是为了加快显示页面的速度(有一些技巧可以处理这个双重刷新问题,但它们超出了你的问题范围)

this long but best article I ever seen on appcache中查看更多信息。

答案 1 :(得分:2)

使用iframe

您网页的缓存清单会包含灯光文件,此页面加载的iframe缓存清单会包含大文件

在Chrome上,iframe的应用程序缓存也将用于页面。我还没有在其他浏览器上测试过这种方法。

http://www.timer-tab.com查看实时示例,如果您使用的是chrome,请在chrome:// appcache-internals /

中查看其拆分缓存

答案 2 :(得分:2)

更改清单文件并再次下载应用程序缓存的文件时,正常的HTTP缓存规则仍然适用。这意味着如果为这些大文件设置正确的HTTP缓存标头,则会得到304,因此不会再次下载这些文件。因此,没有必要拆分应用程序缓存。

答案 3 :(得分:1)

也许是一个答案,但我更愿意对我的调查结果有所了解,因为我对自己的网络应用程序进行了排查。

我发现我可以使用2个iframe(manifest_framework)和(manifest_media)来加载清单,但我仍然不清楚它们是如何被定位的,但我的成功有限。

manifest_framework:

CACHE MANIFEST

CACHE:
appdata.ini
dialog.png
jquery.min.js
login.htm
login.js
manifest.appcache.js

NETWORK:
*

FALLBACK:

manifest_media:

CACHE MANIFEST

CACHE:
manifest_fwk.php
od/audio_track_1_1.m4a
od/audio_track_1_2.m4a
od/audio_track_1_3.m4a
od/audio_track_1_4.m4a
od/video_1.mp4
od/video_2.mp4
od/video_3.mp4

NETWORK:
*

FALLBACK:
./ webapp.php

./ index.php是“登陆页面”的页面,它本身未缓存,但在离线时会回退到webapp.php。

我不明白这些是如何链接到webapp.php页面的。 我发现我只能访问一个或另一个清单缓存。 以上工作在移动safari中,媒体将被缓存,图像但不一定是JS或框架清单中的图像。

任何人都有更多的示例,其中从一个网址/网页引用多个清单?

答案 4 :(得分:0)

W3C工作组已放弃文件系统api,因此不应再使用它。

我们可能会看到它从下一版Chrome中脱落。

http://www.w3.org/TR/file-system-api/

答案 5 :(得分:-1)

CACHE MANIFEST

# This is a comment.
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.

demoimages/mypic.jpg
demoimages/yourpic.jpg
demoimages/ourpic.jpg
sr/scroll.js

NETWORK:
# All URLs that start with the following lines
# are whitelisted.
# whitelisted items are needed to help the site function, you could put regularly
# changing items here
http://example.com/examplepath/
http://www.example.org/otherexamplepath/

CACHE:
# Additional items to cache.
demoimages/allpics.jpg

FALLBACK:
demoimages/currentImg.jpg images/stockImage.jpg`

答案 6 :(得分:-1)

如果Iframe技巧不起作用,请使用HTML5 FileSystem API

请参阅http://updates.html5rocks.com/2012/04/Taking-an-Entire-Page-Offline-using-the-HTML5-FileSystem-API