第10章构建离线Web应用

bsr1983

浏览: 1117484 次
性别:
来自: 北京

最近访客更多访客>>

zxpang

dyh_it

learning_han

lobskiwi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

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>

修改完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发送到浏览器，如果文件类型不正确，即使浏览器支持应用缓存也会返回缓存错误。

分享到：

第11章 HTML5未来展望 | 第九章 Web Storage API

2012-03-15 13:41
浏览 1631
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论