代码改变世界

HTML5新功能之三 《离线应用程序》

2014-01-20 20:31  臭小子1983  阅读(407)  评论(0)  编辑  收藏  举报

离线文件应用

一、什么是离线web应用程序

　　我们通常使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即便这样，依然无法在没有Internet的情况下访问Web。

　　为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。

 

二、需要在服务器端修改文件

　　如果是php服务器：D:/ArppServ/Apache2.2/conf/mime.types文件

　　打开文件增加：text/cache-manifest manifest

 

三、离线应用的目的

　　离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统，并在网络畅通的情况下与服务器进行数据交互

 

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

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

         a.缓存协商：Last-modified,Etag

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

         b.彻底缓存：cache-control,Expires

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

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

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

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

 

五、在线状态检测

　　HTML5提供了onLine方法用于检测当前网络是否在线

1 setInterval(function(){
2         if(window.navigator.onLine){
3             console.log("当前在线");
4         }
5         else{
6             console.log("当前不在线");
7         }
8     }, 1000);

 

五、实现离线应用的步聚

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

一个简单的manifest文件

1 CACHE MANIFEST
2 index.html
3 default.js
4 style.css

 

 1 CACHE MANIFEST  
 2 # wanz app v1  
 3    
 4 # 指明缓存入口  
 5 CACHE:  
 6 index.html  
 7 style.css  
 8 images/1.jpg  
 9 images/2.jpg
10    
11 # 以下资源必须在线访问  
12 NETWORK:  
13 login.php  　　// 如果使用 * 通配符表示在本manifest文件中指定的资源文件都不进行本地缓存
14    
15 # 如果index.php无法访问则用404.html代替  
16 FALLBACK:  
17 /index.php /404.html

 

　　2、要让manifest管理存储，还需要在html标签中定义manifest属性，如下：

 1 <!DOCTYPE HTML>
 2 <html lang="en" manifest='test.manifest'>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     
 9 </body>
10 </html>

 

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

　　　　1）给http服务器加上manifest文件的MINI类型（以下方法都是针对apache服务器）
　　　　　　HTML5离线应用所需的minifest文件的MIME类型为text/cache-manifest，你需要在所使用的web服务器中添加如下文件和MIME类型的映射关系，对于apache需要　　　　　　在mime.types文件中加入如下配置：
　　　　　　　　text/cache-manifest manifest

 

六、文件存储在的位置

　　存储在firebug下的Resources中Application Cache

 

七、属性、事件

　　检测网络是否在线只有两个两个方式：　　

1、navigator.onLine：返回当前是否在线状态，如果在线返回true，否则返回false，从离线到线上

2、navigator.offline：从线上到离线

 

八、更新缓存

　　也可以使用 Javascript 接口手动触发更新。

　　1、自动更新

　　浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。

 

　　2、手动更新

　　开发者也可以使用 window.applicationCache 的接口更新缓存。

　　方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。示范代码如下：

1 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
2     window.applicationCache.update(); 
3 }

 

　　3、在线检测

　　开发者首先必须知道浏览器是否在线。

　　HTML5 提供了两种检测是否在线的方式：navigator.online 和 online/offline 事件。