HTML5应用程序缓存

HTML5引入了应用程序缓存（Application Cache）的特性，允许开发者创建Web应用的离线版本。通过创建一个cache manifest文件（通常以.appcache为扩展名），可以指定需要缓存的文件列表。

一、应用程序缓存优势

应用程序缓存带来了三个重要的优势：

1、离线浏览：应用程序缓存使得用户可以在离线状态下访问应用程序及其内容，这对于移动设备用户或者网络连接不稳定的情况非常有益。用户可以在没有网络连接的情况下继续浏览应用，提高了用户体验和可用性。

2、加载速度快：已经缓存的资源可以直接从本地加载，因此加载速度更快，用户无需等待服务器响应或者下载大量内容，能显著提升应用程序的性能，尤其是对于网速较慢的用户来说。

3、减少服务器负载：一旦资源被缓存，浏览器将只从服务器下载更新过或更改过的资源，而无需重新下载所有内容，可以减少服务器的负载和网络流量，有助于节省带宽和降低服务器成本。

二、Cache Manifest文件

以下是一个Cache Manifest文件的示例：

CACHE MANIFEST

# 版本号
CACHE MANIFEST_VERSION 1.0

# 需要缓存的文件列表
CACHE:
index.html
styles.css
script.js
images/logo.png

# 需要在线获取的文件列表
NETWORK:
*

# 当无法访问服务器时从缓存中获取的文件列表
FALLBACK:
/ offline.html

# 更新频率
# 每次更新页面都会重新下载所有缓存的文件
# NETWORK: 如果文件未在缓存中，则每次都从服务器上重新获取
# CACHE: 如果文件已在缓存中，则每次都从缓存中获取
SETTINGS:
prefer-online

要启用应用程序缓存，需要在HTML文档的<html>标签中添加manifest属性，指向cache manifest文件的URL，例如：

<!DOCTYPE html>
<html manifest="example.appcache">
<head>
<!-- 页面头部内容 -->
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

当浏览器访问包含cache manifest文件的页面时，会自动下载并缓存指定的文件。下次用户离线时，可以从缓存中加载这些文件，实现Web应用的离线访问。

三、Manifest文件

manifest文件是一个简单的文本文件，按照特定的格式编写，用于指定需要缓存的文件和资源。

manifest文件通常包含以下三个部分：

CACHE MANIFEST：在此标题下列出的文件将被缓存。这些文件包括HTML文件、CSS文件、JavaScript文件、图像文件等其他静态资源。当浏览器第一次访问应用时，这些文件将被下载并缓存。之后，用户可以在离线状态下访问这些文件。

NETWORK：在此标题下列出的文件需要与服务器进行连接，并且不会被缓存。这些文件通常是动态生成的内容，例如AJAX请求返回的数据或者用户登录信息。缓存这些文件可能导致应用程序无法正常工作，因此在此处列出以确保浏览器不会缓存它们。

FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面。例如，如果用户访问的页面不存在或者服务器不可用，浏览器将会使用FALLBACK中指定的备用页面。这可以提高应用程序的可用性和用户体验，确保用户始终可以访问到有用的信息。

四、CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

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

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然可用。

五、NETWORK

下面的 NETWORK 部分规定文件 “login.php” 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

可以使用星号来指示所有其他其他资源/文件都需要因特网连接：

NETWORK:
*
FALLBACK

下面的 FALLBACK 部分规定如果无法建立因特网连接，则用 “offline.html” 替代 /html/ 目录中的
所有文件：

FALLBACK:
/html/ /offline.html

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

六、更新缓存

一旦应用程序被缓存，它会保持在缓存中，直到发生以下情况之一：

1、用户清空浏览器缓存：如果用户手动清空了浏览器的缓存，包括应用程序的缓存，那么下次用户访问该应用程序时，浏览器将重新下载和缓存应用程序的所有文件。

2、manifest文件被修改：当应用程序的manifest文件被修改时，浏览器将会检测到变化，并重新下载和缓存与manifest文件相关的所有文件。这意味着如果更新了manifest文件，浏览器将会更新缓存以反映这些更改。

3、由程序来更新应用缓存：在应用程序中，可以使用JavaScript代码来控制应用程序的缓存更新。通过更新manifest文件中的版本号或者使用程序来触发缓存更新，可以实现在特定条件下强制浏览器重新下载和缓存应用程序的文件。

七、注意事项

当浏览器缓存了应用程序的文件后，即使在服务器上修改了这些文件，浏览器也会继续展示已缓存的版本。为了确保浏览器能够更新缓存，需要及时更新manifest文件。

更新manifest文件可以通过更新文件的版本号或者使用程序来实现。当manifest文件中的版本号发生变化时，浏览器会自动重新下载和缓存应用程序的所有文件。

同时，需要注意的是，浏览器对于缓存数据的容量限制可能不太一样。某些浏览器的限制是每个站点5MB，而其他浏览器可能允许更大的缓存容量。因此，在设计和开发应用程序时，需要考虑到这些限制，并确保应用程序的文件不会超过浏览器的缓存容量限制。

八、浏览器支持

下面表格中的数字指示完全支持应用程序缓存的首个浏览器版本：

浏览器	Google	IE	Firefox	Safari	Opera
版本	4.0	10.0	3.5	4.0	11.5