HTML5缓存 - 是否有可能为单个URL有几个不同的缓存?

问题描述:

每个URL都可以链接到单个缓存清单。但我想要几个缓存清单链接到同一个URL。原因如下:HTML5缓存 - 是否有可能为单个URL有几个不同的缓存?

我想要缓存的某些文件很少更新且很大。 因此,每次更新缓存时,即使这些文件未被更改,也会重新下载这些大文件。 所以我想分解缓存。其中一个缓存很少更新大文件,而另一个缓存则用于经常更新的光文件。

你们有什么想法如何拆分HTML5缓存吗?

最有效的方法是:

一)在清单的缓存部分中提到的所有资源使用远的将来到期日期(最大年龄),并添加时间戳后缀到高速缓存中的部分中的每个文件,如:

 
CACHE: 
menu_1355817388000.js 
toolbar_1355817389100.js 

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

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

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

+0

真棒引用文章。给了我很多更深入的见解。 +1,我向所有阅读此内容的人推荐。 – Kiruse

+0

有没有一种方法来重新生成/更新清单以编程方式更改时间戳? –

+0

@KimHonoridez不确定你的意思。标准过程是修改清单中评论的版本。 –

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` 
+1

为离线功能我也希望缓存它不会与您的解决方案被缓存定期更换的物品。这要感谢 – brillout

使用iframe

你的页面的缓存清单将包括光文件,并通过这个页面加载的iframe的缓存清单将包括大文件

对铬iframe的应用程序缓存会也可用于该页面。我没有在其他浏览器上测试过这种方法。

看到一个活生生的例子在http://www.timer-tab.com,如果你使用的是Chrome看到镀铬它的分裂缓存://应用程序缓存,内部/

+3

目前只有谷歌浏览器才支持这个功能(为了节省您阅读整篇文章的意思,仅仅是为了实现这一点 - 就像我一样)。 –

当清单文件发生变化,应用程序缓存的文件将被再次下载,正常的HTTP缓存规则仍然适用。这意味着如果你为这些大文件设置了正确的HTTP缓存标题,你会得到一个304,所以这些文件不会再次下载。所以没必要拆分应用程序缓存。

也许是一个答案,但我更愿意说明我的发现,因为我排查了我自己的webapp。

我发现我可以使用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或图像。

任何人都有更多的例子,从一个URL /页面引用多个清单?

W3C工作组已经放弃了文件系统API,所以它不应该再被使用了。

我们可能会看到它会脱离下一个版本的Chrome。

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