html5的离线储存应用.

Html5离线应用可以让用户在断网的情况下正常浏览网页,节约带宽,减轻服务器压力.

Html5离线应用需要编写一个以manifest为扩展名的网页文本文件,里面写的内容是离线应用的文件清单.

文件内容以CACHE MANIFEST为首行开始

# 为注释    注释的作用:Web应用的缓存只有在manifest文件被修改的情况下才会被更新,利用更新注释通过修改manifest文件不告诉浏览器需要更新缓存

 

清单文件中有三个重要的关键词:

1 1 : CACHE    #指明manifest文件的入口
2 
3 2 : NETWORK:这部分的文件是需要访问网络的。
4 
5 3 : FALLBACK 当缓存第一个资源的时候没有回应的情况下,可以让其缓存备访问资源文件
6 /app/ajax    default.html     #当无法获取app/ajax时,所有对app/ajax/及其子路径的请求都会被转发给default.html

 

例子:

 1 CACHE MANIFEST
 2 
 3 #blog
 4 
 5 Index.html  # 你需要缓存的网页文件
 6 
 7 Js/bootstrap.js
 8 
 9 Css/jquery.min.css
10 
11 Css/style.css
12 
13 Images/bg.png
14 
15 ………
16 
17 FALLBACK
18 
19 /app/ajax  default.html

 

当写好了缓存文件后,需要在网页中引入它

<!DOCTYPE html>

 <html manifest=”online.manifest”>

 </html> 

 

在使用离线应用的时候,应该检测浏览器是否支持离线应用

If(window.applicationCache){

         Support it ;

}

扩展:判断网络是否在线,可用js进行检测

bool  (Window.navigator.online)

这些应用需要服务器支持。

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

            test/cache-manifest manifest

IIS服务器开启方式:

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

 

Html5的离线应用有一套 javascrpt api 操作方法。可以检测离线应用的状态,提高用户体验。

 

posted @ 2014-09-17 15:35  宇宙第一小菜鸟  阅读(162)  评论(0编辑  收藏  举报