HTML5 缓存——单个 URL 是否可以有多个不同的缓存？答案

【问题标题】：HTML5 Cache -- Is it possible to have several distinct caches for a single URL?HTML5 缓存——单个 URL 是否可以有多个不同的缓存？
【发布时间】：2011-10-20 23:39:05
【问题描述】：

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

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

你们知道如何拆分 HTML5 缓存吗？

【问题讨论】：

标签： html caching cache-manifest

【解决方案1】：

最有效的方法是：

a) 对清单 CACHE 部分中提到的所有资源使用远期到期日期（max-age），并为 CACHE 部分中的每个文件添加时间戳后缀，例如：

缓存： menu_1355817388000.js 工具栏_1355817389100.js

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

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

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

【讨论】：

很棒的参考文章。给了我很多更深刻的见解。为此 +1，我向所有阅读本文的人推荐它。
有没有办法重新生成/更新清单以编程方式更改时间戳？
@KimHonridez 不确定您的意思。标准过程是在清单的注释中修改版本。

【解决方案2】：

使用 iframe

您页面的缓存清单将包含轻量级文件，并且此页面加载的 iframe 的缓存清单将包含大文件

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

在http://www.timer-tab.com 上查看一个实时示例，如果您使用的是 chrome，请在 chrome://appcache-internals/ 上查看其拆分缓存

【讨论】：

【解决方案3】：

当manifest 文件被改变并且应用缓存的文件被再次下载时，正常的HTTP 缓存规则仍然适用。这意味着，如果您为这些大文件设置正确的 HTTP 缓存标头，您将获得 304，因此不会再次下载这些文件。所以不需要拆分应用缓存。

【讨论】：

【解决方案4】：

也许是一个答案，但在我对自己的 web 应用程序进行故障排除时，我更想阐明我的发现。

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

清单框架：

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/页面引用多个清单的示例？

【讨论】：

【解决方案5】：

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

我们很可能会看到它从 Chrome 的下一版本中消失。

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

【讨论】：

【解决方案6】：

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`

【讨论】：

对于离线功能，我还想缓存那些不会随您的解决方案缓存的定期更改的项目。不过谢谢

【解决方案7】：

如果 iframe 技巧不起作用，请使用 HTML5 FileSystem API

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

【讨论】：

目前只有谷歌浏览器支持（为了让你阅读整篇文章之后才意识到这一点——就像我一样）。