当前位置：文江博客话题详情

HTML caching cache-manifest

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

发布于 2024-12-11 12:07:14 字数 185 浏览 0 评论 0 原文

每个 URL 都可以链接到一个缓存清单。但我希望多个缓存清单链接到同一个 URL。原因如下：

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅沫记忆 2024-12-18 12:07:14

最有效的方法是：

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

CACHE:
menu_1355817388000.js
toolbar_1355817389100.js

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

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

请参阅这是我在 appcache 上见过的一篇很长但最好的文章。

The most efficient way is:

a) Use far-future expiration date (max-age) on all resources mentioned in manifest's CACHE section and add timestamp suffix to each file in the CACHE section, e.g.:

CACHE:
menu_1355817388000.js
toolbar_1355817389100.js

b) When any of the above files change on the server, regen/update manifest to change the timestamp. Only the file with the modified timestamp will get downloaded next time. Mission accomplished.

Note: Reload the page twice in the browser, as on the first refresh browser downloads just the manifest and uses old cached resources to paint the page. This is done to speed up displaying the page (there are tricks to handle this issue of double refresh, but they are outside the scope of your question)

See more info in this long but best article I ever seen on appcache.

回复收藏 0 原文

俯瞰星空 2024-12-18 12:07:14

使用 iframe

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

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

请参阅 http://www.timer-tab.com 上的实时示例，如果您使用的是 chrome，请参阅它的分离缓存位于 chrome://appcache-internals/

回复收藏 0 原文

后知后觉 2024-12-18 12:07:14

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

回复收藏 0 原文

屋檐 2024-12-18 12:07:14

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

我发现我可以使用 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 页面。
我发现我只能访问一个或另一个清单缓存。
上面的代码适用于 mobile safari，媒体和图像将被缓存，但不一定是框架清单中的 JS 或图像。

有人有更多从一个 URL/页面引用多个清单的示例吗？

Maybe an answer but I'd more like to shed some light on my findings as a I troubleshoot my own webapp.

I've discovered that I can use 2 iframes (manifest_framework) and (manifest_media) to load the manifests, but i'm still not exactly clear how they are targetted, but I had limited success.

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 is the page the 'landing page' which itself isn't cached but falls back to webapp.php when offline.

What I don't understand is how these link to the webapp.php page.
I am finding I can only get access to one or the other manifests cache.
The above works in mobile safari, the media would be cached, and image but not necessarily the JS or images in the framework manifest.

Anyone have more examples where multiple manifests are referenced from the one URL/page?

回复收藏 0 原文

臻嫒无言 2024-12-18 12:07:14

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

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

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

回复收藏 0 原文

吻安 2024-12-18 12:07:14

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`

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`

回复收藏 0 原文