HTML5 缓存清单:后备部分和网络 *

发布于 2024-09-10 10:56:22 字数 503 浏览 5 评论 0原文

来自 深入了解 HTML5:缓存清单:后备部分

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*

我不明白 URL 给出了什么这段代码确实如此。后备部分是否意味着当找不到任何内容时,显示 offline.html 页面

,然后 network: * 所有资源都将被缓存?它还说

它使用常见的 CSS、JavaScript 和 每页上的图像。这些中的每一个 需要列出资源 明确地在 CACHE

这似乎与 network: * 冲突,其中似乎说缓存所有内容?

from Dive into HTML5: Cache Manifest: Fallback section

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*

i dont understand from the URL given what this block of code exactly does. does the fallback section mean when anything is not found, show the offline.html page

then network: * all resources will be cached? it says also

It uses common CSS, JavaScript, and
images on each page. Each of these
resources would need to be listed
explicitly in the CACHE

this seems to conflict to network: * where it seems to say cache everything?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

油焖大侠 2024-09-17 10:56:22

缓存清单中有三种类型的标题:CACHE、NETWORK 和 FALLBACK。任何不在标题下的内容都会隐式设置在 CACHE 下。每个部分的解释:

CACHE: 此标题下的文件将被缓存。

网络:此标题下的文件需要互联网连接,因此不会被缓存。

FALLBACK:与此标题下的模式(例如模式“/”,匹配所有文件)匹配且尚未缓存的文件,将显示一个后备文件。

关于 Dive into HTML 5 中的代码块,下面有一个对“NETWORK: *”部分的解释:

这意味着,当您浏览时
这个假设的离线启用
在线维基百科,您的浏览器将
获取图像和视频等
通常嵌入资源,即使
他们位于不同的域中。 (这
在大型网站中很常见,即使
它们不是离线网络的一部分
应用。 HTML 页面已生成
并在本地提供服务,而图像和
视频由 CDN 提供
另一个域。)没有这个通配符
标志,我们假设的离线启用
维基百科在以下情况下会表现得很奇怪
你当时在线——具体来说,它
不会加载任何外部托管的
图片或视频!

以下引述:

它使用常见的 CSS、JavaScript 和
每页上的图像。这些中的每一个
需要列出资源
明确地在缓存中

意味着您必须在 CACHE 标题下的清单中包含所有必需的 CSS、Javascript 和图像文件。它与“NETWORK:*”不冲突,因为“NETWORK”标题意味着“缓存所有内容”。它实际上意味着相反:网络标题下的所有内容都需要互联网连接,并且不应被缓存。

There are three types of headings in a cache manifest, CACHE, NETWORK and FALLBACK. Anything that is not under a heading is implicitly set under CACHE. An explanation of each section:

CACHE: Files under this heading will be cached.

NETWORK: Files under this heading require an internet connection and so will be NOT be cached.

FALLBACK: Files matched by patterns under this heading (Such as the pattern "/", which matches all files) and have not been cached, will have a fallback file shown instead.

With regards to the block of code from Dive into HTML 5, there is an explanation of the "NETWORK: *" part just under it:

It means that, while you’re browsing
this hypothetical offline-enabled
Wikipedia online, your browser will
fetch images and videos and other
embedded resources normally, even if
they are on a different domain. (This
is common in large websites, even if
they aren’t part of an offline web
application. HTML pages are generated
and served locally, while images and
videos are served from a CDN on
another domain.) Without this wildcard
flag, our hypothetical offline-enabled
Wikipedia would behave strangely when
you were online — specifically, it
wouldn’t load any externally-hosted
images or videos!

The following quote:

It uses common CSS, JavaScript, and
images on each page. Each of these
resources would need to be listed
explicitly in the CACHE

means that you must include all necessary CSS, Javascript and image files in the manifest under the CACHE heading. It does not conflict with 'NETWORK: *' because the NETWORK heading does NOT mean 'cache everything'. It actually means the opposite: that everything under the NETWORK heading requires an internet connection and should not be cached.

惟欲睡 2024-09-17 10:56:22

我发现了关于 FALLBACK: 的更多有用的东西:

经过一些实验,我尝试了各种方法,包括 FALLBACK: 中的文件是否应该出现在 CACHE 或 NETWORK 部分中。答案似乎是否定的。

举个例子...
倒退:
注册-portrait.png 离线-portrait-1.png
sign-up-landscape.pngoffline-landscape-1.png

我最近在我的一个微型网站中指定了这一点。目的是在线时显示sign-up-png 文件,离线时显示offline-png 文件。这效果很好。特别是每行左侧的文件隐式地好像它们位于网络部分中一样,站点将始终尝试使它们联机。它们也不能添加到 NETWORK 部分,否则它似乎会覆盖 FALLBACK 中的内容。
另外,令人高兴的是,右侧的文件隐式地添加到 CACHE: 部分中,因此即使一开始不使用它们,它们也会在第一次加载时缓存,而无需显式地将它们添加到 CACHE: 尽管您可以将它们添加到那里如果你愿意的话也可以。这没有什么区别。

对于此配置,查看网络服务器日志,我发现每次刷新页面时,apache都会针对清单文件和该版本页面所需的sign-up-png文件记录一个304(有一个CSS媒体)选择器根据页面大小确定哪个)。因此,它总是正确地检查sign-up-png 文件以及通常的清单检查,这正是我想要的。

为了彻底起见,我尝试查看根文件是否也需要位于 CACHE: 部分中。事实证明并非如此!如果您的顶级文件是index.html,并且它的html标记中指定了清单文件,那么清单文件不需要在任何地方包含index.html,它会被隐式缓存。

我很好奇应用程序缓存可以扩展多远。您可以包含链接到 iframe 或 iframe 中的其他 html 文件吗?或者这些都需要有自己独立的清单文件吗?有人愿意评论吗?

关于格式的附带评论,不要犯我犯的错误,即放入...
网络
file1.js

缺少冒号会导致它完全崩溃,认为 NETWORK 本身就是一种资源。

一定是...
网络:
文件1.js

I have found out more useful stuff about FALLBACK:

After a bit of experimenting, I tried various things including whether files in FALLBACK: should appear in the CACHE or NETWORK sections at all. The answer seems to be no.

As an example...
FALLBACK:
sign-up-portrait.png offline-portrait-1.png
sign-up-landscape.png offline-landscape-1.png

I specified this in one of my micro sites recently. The intention is to show the sign-up- png files when online and the offline- png files when offline. This works well. In particular the files on the left side of each line are implicitly as if they were in the NETWORK section, the site will always try to get them online. They must not be added to the NETWORK section as well, otherwise it seems to override what's in FALLBACK.
Plus, happily, the files on the right are implicitly as if added in the CACHE: section so even if they are not used at first, they are cached on first load without having to explicitly add them to CACHE: although you can add them there too if you want. It makes no difference.

For this configuration, looking at the webserver logs, I see that each time the page is refreshed, apache logs a 304 against the manifest file and against the sign-up- png file that's required for that version of the page (there's a CSS media selector determining which, based on page size). So it's correctly always checking for the sign-up- png files as well as the usual manifest checking, which is exactly what I want.

For the sake of being thorough, I tried to see if the root file needs to be in the CACHE: section too. It turns out it doesn't! If your top level file is index.html and it has the manifest file specified in its html tag then the manifest file need not contain index.html anywhere, it's implicitly cached.

I am curious how far the app cache can extend. Can you include other html files that are linked to or in iframes? Or do those all need to have their own manifest files that are separate? Anyone care to comment?

A side comment about format, don't make the mistake I did, which is to put in...
NETWORK
file1.js

Missing the colon causes it to totally break, thinking that NETWORK is a resource in its own right.

It must be...
NETWORK:
file1.js

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文