您的位置：首页 > Web前端 > HTML5

HTML5应用缓存

2013-11-21 14:06 204 查看

Firefox
OS是一款完全基于HTML5的移动操作系统，所有应用包括主界面，都是采用HTML5技术实现，包括打电话，发短信等最基本的功能。

那么很多开发者都会问：如果没有网络，是不是就没法打电话发短信了？当然不会了，HTML5标准中定义了应用缓存机制（Offline Web
Application），只要网页应用定义了自己的缓存配置文档，那么应用就能在离线状态下正常运行。

HTML5针对网页应用定义了一套网页机制，基于应用缓存机制（App
Cache），HTML5应用也可以离线运行。使用缓存机制的网页应用拥有以下优点:
离线浏览。即使在网络断开的情况下也可以正常运行

启动速度更快。HTML5应用加载的所有资源都是本地缓存文件，因此加载速度更快。

服务器减压。浏览器只会下载变更的资源。

启用应用缓存

启用应用缓存很简单，只需在HTML标签中指定manifest地址即可：

<html
manifest="example.appcache">

...

</html>

部分浏览器（例如火狐）会在第一次访问页面时显示提醒用户，是否允许该网站使用缓存。

文档格式

缓存配置文档路径可以是相对路径也可以是绝对路径，如果是绝对路径，必须保证其origin（协议+域名+端口）和该文档一致。配置文档必须指定MIME
type为text/cache-manifest。

文档按章节列出资源入口（entries）的清单，例如：
CACHE
MANIFEST

# v1 2012-0730

index.html

cache.html

style.css

image1.png

# Use from network if available

NETWORK:

network.html

# Fallback content

/ fallback.html

从示例中可以看到，一个完整的缓存配置文档包含三个部分：

CACHE

CACHE是默认部分，不需要显示的列出HEADER，在该部分种定义的所有文件都会在文档第一次加载时被缓存。

NETWORK

在该部分定义的文件是需要链接网络的，不会从缓存中获取。可以用通配符。

FALLBACK

该部分定义了备选资源，每一条目都会定义两个URI，当第一个资源无法访问时，会启用第二个资源。两个URI都必须是相对路径，并且和文档路径保持一致。也可以用通配符。

记住：千万千万不把缓存配置文档自己列在文档里面！！否则缓存可能永远都无法更新了

缓存应用加载顺序

启用应用缓存的HTML5应用加载顺序如下：

当浏览器打开一个定义了manifest属性的HTML5页面时，如果缓存不存在，浏览器会加载此页面，并且下载配置文档中列出的所有资源文件，并且创建第一个版本的应用缓存。

之后访问该应用时，浏览器会直接从本地缓存中加载该文档以及相关资源。同时，浏览器会向window.applicationCache
发送一个检查事件，用来检查缓存配置文档是否有更新

如果缓存配置文档已经是最新版本，浏览器会发送一个noupdate事件给applicationCache对象，整个更新过程完毕。所以HTML5应用有任何文件有变更时，例如更改了一个css字体样式，你都应该更新manifest文件。

如果缓存配置文档有变更，浏览器会将最新文档中列出的资源文件以及通过applicationCache.add()方法添加的文件全部抓取并放入临时缓存，当然获取资源文件的过程完全遵循HTTP的缓存机制。对于每个被放入临时缓存的文件，浏览器都会发动一个progress
event至applicationCache对吸纳个。如果中间发生错误，浏览器会发送一个errro
event，并且更新中止。

一旦所有文件都被更新完毕，浏览器会发送一个cached
event给applicationCache对象。因为文档此时已经被加载，所以更新后的文档会在下次加载是生效。

参考文档：

[1]: Using the application caches

[2]: Offline Web Applications

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航