HTML5--离线web应用

2016-02-14 本文已影响3003人 SuperSnail

HTML5新增了离线应用，离线应用使得我们可以在网页或应用在没有网络的情况下依然可以使用。
离线应用的使用需要以下几个步骤：

离线检测（确定是否联网）
访问一定的资源
有一块本地空间用于保存数据（无论是否上网都不妨碍读写）

使用HTML5离线web应用

1、检查浏览器的支持情况的方法

  if(window.applicationCache){
        //浏览器支持离线应用
  }

2、关于描述文件
描述文件用来列出需要缓存和不需要缓存的资源，以备离线时使用。
描述文件的扩展名以前用.manifest，现在推荐使用.appcache，并且描述文件需要配置正确的MIME-type，即"text/cache-manifest"，必须在web服务器上进行配置（文件编码必须是UTF-8）。不同的服务器有不同的配置方法，具体这里不详述。

首行必须以以下字符串开始

    CACHE MANIFEST

剩下的就是要缓存的文件的URL，一行一个（相对URL是相对于清单文件而言的，不是相对于文件）

    #以“#”开头的是注释
    common.css
    common.js

这样这个文件中列举的所有的文件都会被缓存

在清单中，可以使用特殊的区域头来标识头信息之后的清单项的类型，上面的最简单的缓存属于"CACHE:"区域。
像这样

    #该头信息之后的内容需要缓存
    CACHE:
    common.css
    connom.js

以"NETWORK:"开头的区域列举的文件，总是从线上获取，不缓存
NETWORK:头信息支持通配符"*",表示任何未明确列举的资源，都将通过网络加载

    #该头信息之后的内容不需要缓存，总是从线上获取
    NETWORK:
    a.css
    #表示以name开头的资源都不要缓存
    name/

以"FALLBACK:"开头的区域中的内容，提供了获取不到缓存资源时的备选资源路径
该区域中的内容，每一行包含两个URL（第一个URL是一个前缀，任何匹配的资源都不被缓存，第二个URL表示需要被缓存的资源）

    FALLBACK:
    name/  example.html

一个清单可以有任意多个区域，且位置没有限制。

3、搭建离线应用程序
假设我们要构建一个包含css，js，html的单页应用，同时要为这个单页应用添加离线支持。
要将描述文件与页面关联起来，需要使用html标签的manifest特性指定描述文件的路径

    <html manifest='./offline.appcche'>

开发离线应用的第一步就是检测设备是否离线

HTML5新增了navigator.onLine属性
当该属性为true的时候表示联网，值为false的时候，表示离线
```
  if(navigator.onLine){
      //联网
  }else{
      //离线
  }
```

** 注：IE6及以上浏览器及其他标准浏览器都支持这个属性 **

online事件（IE9+浏览器支持）

当网络从离线变为在线的时候触发该事件，在window上触发该事件，不需要刷新

    window.online = function(){
        //需要触发的事件
    }

offline事件（IE9+浏览器支持）
当网络从在线变为离线的时候触发该事件，和online事件一样，在window上触发该事件，不需要刷新
```
  window.offline = function(){
      //需要触发的事件
  }
```

应用缓存

应用缓存（Application Cache）是从浏览器的缓存中分出来的一块缓存区（大小根据具体浏览器而定，一般是5M）

应用缓存和网页缓存的区别：

应用缓存为整个web应用程序服务，网页缓存服务于单个网页
应用缓存只缓存指定页面需要的指定资源（可人为控制），任何网页都具有网页缓存（浏览器默认行为）
应用缓存不会随着清除浏览器缓存而消失
应用缓存不会像网页缓存那样，老数据会被最新一次的新数据替代
应用缓存可以离线访问，网页缓存必须在线访问
应用缓存可靠，可控，网页缓存不可控

应用缓存的优势

离线浏览
速度更快--已缓存资源加载更快
减少负载--浏览器只从服务器下载更新过的文件

一个web应用首次下载并缓存之后，任何加载请求都优先来自于缓存，因此可以实现离线缓存。如果不需要使用离线缓存了，就需要在服务器端删除描述文件，或者删除HTML页面中的manifest属性。

一旦应用被缓存，则缓存始终不变。那么，怎样才能改变缓存

用户清空应用缓存
manifest文件被修改
使用update()方法更新缓存

如果服务器上的文件有所修改的话，那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法

此外，我们还可以使用HTML5提供的API来操作和更新缓存

applicationCache API

applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性，值为常量，表示缓存状态

0：没有与页面相关的应用缓存（未缓存）
1：应用缓存未得到更新（空闲）
2：正在下载描述文件并检查更新（检查中）
3：应用缓存正在下载描述文件中指定的资源（下载中）
4：应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了（更新就绪）
5：应用缓存的描述文件不存在了，页面无法再访问应用缓存（已过期）

这个对象有以下事件，表示其状态的改变

每次载入一个设置了manifest属性的HTML文件，首先会触发checking事件
如果应用程序已经缓存，并且清单文件没有改动，则浏览器触发noupdate事件
如果应用程序已经缓存，并且清单文件发生改动，则浏览器触发downloading事件，下载完毕后触发updateready事件
如果应用程序未缓存，则downloading事件和progress事件都会触发，但是下载完成后触发cached事件而不是updateready事件
如果处于离线，无法检测清单状态，则触发error事件，如果引用一个不存在的清单文件，也会触发error事件
如果处于在线，应用也缓存了，但是清单文件不存在，则会触发obsolete事件，并将应用程序从缓存中清除。

一般来讲，这些事件会随着页面加载按上述顺序依次触发

update()方法

通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件

    applicationCache.update();

update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。

swapCache()方法

如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。

    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
    };

浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户

    window.applicationCache.onupdateready = function(){
        var con = comfirm('有新内容可用，是否重新加载？');
        if(con){
            location.reload();
        }
    }