?
10.1HTML5离线Web应用概述
10.2 使用HTML5离线Web应用API
10.2.1 检测浏览器是否支持离线Web应用API
?????? if(window.applicationCache)
{
?????? //浏览器支持离线应用
}
10.2.2 搭建简单的离线应用程序
?????? 假设开发人员希望搭建一个包含HTML文档、样式表和JavaScript文件的单页面应用程序，同时要为这个HTML5应用程序添加离线支持，那么可参考代码清单10-2，在html元素中加入manifest特性。
代码清单10-2
<!DOCTYPE html>
<html manifest=”application.manifest”>
.
.
.
</html>
?????? 修改完HTML文档，接下来需要提供缓存清单文件，用以指明那些资源需要存储在缓存中。代码清单10-3是一个缓存清单文件的内容示例。
?????? CACHE MAINFEST
?????? example.html
?????? example.js
?????? example.css
?????? example.gif
10.2.3支持离线行为
?????? HTML5引入了一些新的事件，用来让应用程序检测网络是否正常连接。应用程序处于在线状态和离线状态会有不同的行为模式。是否处于在线状态可以通过检测window.navigator对象的属性来做判断。首先，navigator.onLine是一个标明浏览器是否处于在线状态的布尔属性。当然，onLine值为true并不能保证Web应用程序在用户的机器上一定能访问到相应的服务器。而当其值为false时，不管浏览器是否真正联网，应用程序都不会尝试进行网络连接。
10.2.4 manifest文件
?????? 离线应用包含一个manifest(清单)文件，此文件中列出了浏览器为离线应用缓存的所有资源。manifest文件的MIME类型是text/cache-manifest。
?????? manifest文件的写法是先写CACHE MANIFEST，然后换行，每行单列资源文件。每行的换行符可以是CR、LF或者CRLF，但文本编码格式必须是UTF8.
?????? 添加到CACHE MANIFEST区块中的文件，无论应用程序是否在线，浏览器都会从应用程序缓存中获取该文件。没必要在这里列出应用程序的主HTML资源，因为最初指向manifest文件的HTML文档会被隐含包含进来。但是，如果希望缓存多个HTML文件，或者希望将多个HTML作为支持缓存的应用程序的可选入口，则需要将这些文件都列在CACHE MANIFEST中。
?????? FALLBACK部分提供了获取不到缓存资源时的备选资源路径。
?????? NETWork部分罗列的资源，无论缓存中存在与否，均从网络获取。
10.2.5 applicationCache API
?????? applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可触发一系列与缓存状态相关的事件。该对象有一个数值型属性window.applicationCache.status代表了缓存的状态。缓存状态共有6种，见表10-2。
??????
|
数值型属性 |
缓存状态 |
|
0 |
UNCACHED（未缓存） |
|
1 |
IDLE（空闲） |
|
2 |
CHECKING（检查中） |
|
3 |
DOWNLOADING（下载中） |
|
4 |
UPDATEREADY（更新就绪） |
|
5 |
OBSOLETE（过期） |
?????? 目前Web上大部分的页面都没有指定缓存清单，所以这些页面的状态就是UNCACHED（未缓存）。IDLE（空闲）是带有缓存清单的应用程序的典型状态。处于空闲状态说明应用程序的所有有资源都已被浏览器缓存，当前不需要更新。如果缓存曾经有效，但现在manifests文件丢失，则缓存进入OBSOLETE（过期）状态。
表10-3 常见事件及其关联的缓存状态
|
事件 |
关联的缓存状态 |
|
onchecking |
CHECKING |
|
ondownloading |
DOWNLOADING |
|
onupdateready |
UPDATEREADY |
|
onobsolete |
OBSOLETE |
|
oncached |
IDLE |
此外，没有可用更新或者发生错误时，还有一些表示更新状态的事件：
（1）onerror
（2）onnoupdate
（3）onprogress
window.applicationCache有一个update()方法。调用update方法会请求浏览器更新缓存。包括检查新版本的mainfest文件并下载必要的新资源。如果没有缓存或者缓存已过期，则会抛出错误。
10.3 使用HTML5离线Web应用构建应用
?????? 需要注意，manifest文件的内容类型必须配置为text/cache-manifest发送到浏览器，如果文件类型不正确，即使浏览器支持应用缓存也会返回缓存错误。
?