缓存设置多少合适_HTML5 应用程序缓存

HTML5 应用程序缓存

使用应用程序缓存，您可以通过创建缓存文件轻松创建 Web 应用程序的离线版本。

什么是应用程序缓存？

HTML5引入了应用程序缓存，这意味着Web应用程序可以在没有互联网连接的情况下被缓存和访问。

应用程序缓存为应用程序带来三个好处：

离线浏览 - 用户可以离线使用应用程序 速度 - 缓存的资源加载速度更快 减少服务器负载 - 浏览器只会从服务器下载更新或更改的资源

浏览器支持

表中的数字表示第一个完全支持应用程序缓存的浏览器版本。

API

缓存

4.0

10.0

3.5

4.0

11.5

HTML 缓存示例

以下示例显示了带有缓存的 HTML 文档（用于离线浏览）：

例子

manifest="demo.appcache">

文档内容 ......

亲自尝试

缓存基础知识

要启用应用程序缓存，请在文档的标签中包含属性：

...

每个指定的页面在用户访问时都会被缓存。如果未指定任何属性，则不会缓存该页面（除非在文件中直接指定该页面）。

文件的建议扩展名是：“。”。

注意：文件需要设置正确的 MIME 类型，即“text/cache-”。必须在 Web 服务器上进行配置。

文档

缓存文件是简单的文本文件，它告诉浏览器要缓存什么（以及不要缓存什么）。

该文件分为三部分：

缓存

第一行 CACHE 是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的文件列出了三个资源：一个 CSS 文件、一个 GIF 图像和一个文件。当文件加载时，浏览器会从网站根目录下载这三个文件。这样，无论何时用户断开互联网连接，这些资源仍然可用。

以下部分指定文件“login.php”永远不会被缓存，并且无法离线使用：

NETWORK:
login.asp

您可以使用星号来表示所有其他附加资源/文件都需要互联网连接：

NETWORK:
*
FALLBACK

以下部分指定如果无法建立 连接，则 /html/ 目录中的所有文件都将替换为“.html”：

FALLBACK:
/html/ /offline.html

注意：第一个 URI 是资源，第二个是替代。

刷新缓存

一旦应用程序被缓存，它将保持缓存状态，直到发生以下情况之一：

示例 - 完整的缓存文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

提示：以“#”开头的行是注释，但也可以用于其他目的。应用程序的缓存仅在其文件更改时更新。如果您编辑图像或修改功能，这些更改将不会被重新缓存。更新注释行中的日期和版本号是让浏览器重新缓存文件的一种方法。

关于应用程序缓存的说明

请小心您的缓存内容。

一旦文件被缓存，即使你在服务器上修改了该文件，浏览器仍会继续显示缓存版本。要确保浏览器更新其缓存，你需要更新该文件。

注意：不同浏览器对缓存数据大小的限制可能不同（某些浏览器对每个站点的限制为 5MB）。