html5离线应用application cache

======================================================
注：本文源代码点此下载
======================================================

一、应用场景

我们通常使用浏览器缓存在用户磁盘上存储web单页,在用户再次浏览的时候已节省带宽,但即便这样,依然无法在没有internet的情况下访问web。为了让web应用程序在离线状态也能被访问。html5通过application cache api提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。

离线本地存储和传统的浏览器缓存有什么不同呢?

1、浏览器缓存主要包含两类:

a.缓存协商:last-modified,etag

浏览器向服务器询问页面是否被修改过,如果没有修改就返回304,浏览器直接浏览本地缓存文件。否则服务器返回新内容。

b.彻底缓存:cache-control,expires

通过expires设置缓存失效时间,在失效之前不需要再跟服务器请求交互。

2、离线存储为整个web提供服务,浏览器缓存只缓存单个页面;

3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览,浏览器缓存无法指定;

4、离线存储可以动态通知用户进行更新。

二、如何实现

离线存储是通过manifest文件来管理的,需要服务器端的支持,不同的服务器开启支持的方式也是不同的。

cache manifest//必须以这个开头

version 1.0 //最好定义版本,更新的时候只需修改版本号

cache:

m.png

test.js

test.css

network:

*

fallback

online.html offline.html

cache指定需要缓存的文件;network指定只有通过联网才能浏览的文件,*代表除了在cache中的文件;fallback每行分别指定在线和离线时使用的文件

要让manifest管理存储,还需要在html标签中定义manifest属性,如下:

doctype html>

html lang="en" manifest='test.manifest'>

head>

meta charset="utf-8">

title>title>

head>

body>

body>

html>

最后别忘了,这些应用需要服务器支持。

apache服务器开启支持的方式是:在conf/mime.types中添加一段代码:

test/cache-manifest manifest

iis服务器开启方式:

右键--http---mime映射下,单击文件类型---新建---扩展名输入manifest,类型中输入test/cache-manifest

三、通过js动态控制更新

applicationcache对象提供个了一些方法和事件,管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationcache可以看到这个对象的所

有属性和事件方法。

applicationcache.onchecking = function(){

//检查manifest文件是否存在

}

applicationcache.ondownloading = function(){

//检查到有manifest或者manifest文件

//已更新就执行下载操作

//即使需要缓存的文件在请求时服务器已经返回过了

}

applicationcache.onnoupdate = function(){

//返回304表示没有更新,通知浏览器直接使用本地文件

}

applicationcache.onprogress = function(){

//下载的时候周期性的触发,可以通过它

//获取已经下载的文件个数

}

applicationcache.oncached = function(){

//下载结束后触发,表示缓存成功

}

application.onupdateready = function(){

//第二次载入,如果manifest被更新

//在下载结束时候触发

//不触发onchched

alert("本地缓存正在更新中。。。");

if(confirm("是否重新载入已更新文件")){

applicationcache.swapcache();

location.reload();

}

}

applicationcache.onobsolete = function(){

//未找到文件,返回404或者401时候触发

}

applicationcache.onerror = function(){

//其他和离线存储有关的错误

}

四、浏览器与服务器的交互

曾经有面试题是这样的:"描述在浏览器的地址栏中输入:http://www.baidu.com 后发生了什么?"。

1、服务端返回baidu页面资源,浏览器载入html

2、浏览器开始解析

3、发现link,发送请求载入css文件

4、浏览器渲染页面

5、发现图片,发送请求载入图片,并重新渲染

6、发送请求js文件,阻塞渲染。如果js对dom进行了操作,则会进行rerender

对于支持离线存储的页面,浏览器和服务器的交互又是如何呢?

首次载入页面:

1-6 : 同上

7:请求页面中需要缓存的页面和数据,就算在之前的步骤中已经请求过(这是个耗能的地方)

8:服务器返回所有请求文件,浏览器进行本地存储

再次载入页面:

1:发送请求

2:使用本地存储的离线文件

3:解析页面

4:请求服务端的manifest文件,判断是否有改变,返回304则表示没有改变进入步骤5,否则进入步骤6

5:进入首次载入页面的7-8

6:使用本地存储,不重新请求

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/