构建离线WEB应用

HTML5新增了localstroage和application cache做离线缓存，两种缓存各有应用的场景，今天我们说说application cache这种方案。

web当中使用缓存的原因之一是为了支持离线应用，其它优点：

1. 减少网络资源的请求（减少服务器压力）
2. 相比网络加载资源，加载本地资源速度更快，体验更好
3. 在断网的情况下，能提供良好的用户体验（断网加载）

通常缓存的资源包括：HTML文档，JS文件，CSS文件，图片，多媒体
application cache 缓存的资源文件，通常保存在浏览器持久性存储资源的地方，也就是在本地硬盘上面

使用HTML5离线WEB应用API：

1、检查浏览器是否支持

    if(window.applicationCache){
        // 则支持离线缓存
    }

2、在html文档的HTML元素上添加manifest特性，如下：

3、在application.appcache文件中，定义缓存文件清单，比如：

    CACHE MANIFEST

4、支持离线行为
HTML5引入了一些新的事件，可以让应用程序检测网络是否正常连接。这样就可以控制应用程序在离线和在线的时候有不同的行为，HTML5当中可以通过检测window.navigator对象来做判断，navigator.onLine是一个标明浏览器是否在线的布尔属性，我们可以通过以下代码作相应的判断：

    function loadDemo(){
        if(navigator.onLine){
            log("online")
        }else{
            log("offline")
        }
    }
    
    // 添加事件
    window.addEventListener("online",function(e){
        log("online")
    });

5、manifest文件
离线应用当中包含一个manifest的文件，文件当中列出了浏览器为离线应用缓存的所有资源列表。manifest的文件MIME类型是text/cache-manifest
文件示例：

CACHE MANIFEST
# 要换成的文件
about.html
html5.css
index.html
a.gif
b.jpg

#不缓存的文件  # 每次都会从服务器拉去新的文件，因为浏览器会缓存，为了保证每次的内容都是服务器上最新的，应当在这里
NETWORK
signup.html


#获取不到资源文件时候的备选资源路径，一般出现404的时候会使用
FALLBACK
signup.html     offline.html  #当访问signup.html出现404的时候，会转到offline.html
/app/ajax       offline.html  #当访问/app/ajax路径下的内容出现404的时候，会转到offline.html

6、applicationCache API
applicationCache API是一个操作应用缓存的接口。

window.applicationCache.status，代表了缓存的状态，一共有6种，如下表：

数值型属性	缓存状态	说明
0	UNCACHED（未缓存）	没有指定缓存清单
1	IDLE（空闲）	带有缓存清单应用的状态，表示所有文件都已被缓存
2	CHECKING（检查中）
3	DOWNLOADING（下载中）	1
4	UPDATEREADY（更新就绪）	1
5	OBSOLETE（过期）	1

相关事件

事件	关联的缓存状态
Onchecking	CHECKING
Ondownloading	DOWNLOADING
Onupdateready	UPDATEREADY
Onobsolete	OBSOLETE
Oncached	IDLE

没有更新或者更新发生错误，
onerror
onnoupdate
onprogress

window.applicationCache.update——会请求浏览器更新缓存，包括检查新版本的manifest文件，并下载必要的新资源，如果没有缓存，或者缓存已过期，则会抛出错误。

7、运行中的应用缓存
如果应用使用了离线缓存，浏览器在应用缓存中已经成功缓存了manifest列表当中的内容之后，它会优先的从缓存当中获取资源，之后，浏览器只干一件事，就是检查manifest文件是否已经被改变过，流程如下：

• 首次访问，浏览器加载页面及其资源
• 解析页面的时候，浏览器会解读HTML元素的manifest属性，然后加载CACHE 和FALLBACK部分列出的文件，到xxx.com应用的缓存，浏览器大于5M的存储空间
• 再次访问应用网站的时候，浏览器会从缓存当中加载资源文件，同时，如果应用在线，则会检查manifest文件是否更新过
• 离线状态，浏览器会从资源缓存中加载，而访问NETWORK资源时，会加载FALLBACK的内容。
• 当应用处于在线状态，修改了缓存文件列表当中的某一个文件，但是，没有更新manifest(没发生变化)，那么浏览器依然会从浏览器缓存当中加载这个文件。这时候，需要稍微再manifest文件当中修改字符（一般是版本号），浏览器才会加载最新的manifest文件
• 当修改了缓存的文件，也修改了manifest文件，但刷新浏览器的时候，依然看到的是原来缓存的内容，因为页面从应用缓存中加载资源时发生在服务器执行服务器检查之前，浏览器是不会自动更新加载页面的。可以把浏览器关掉，再次打开，也可以通过updateready事件绑定监听，提示用户进行刷新。

使用HTML5离线应用（applicationCache ）构建应用

    服务端：
    1、服务器配置
    2、创建manifest文件
    
    客户端：
    3、构建HTML，并在HTML标签上添加manifest属性，属性值是服务器上配置的缓存资源列表的文件名
    4、配置相关事件，创建离线Javascript

Js文件内容：

    window.applicationCache.onchecking = function(e){
        log("")
    }
    
    window.applicationCache.onnoupdate = function(e){};
    window.applicationCache.onupdateready = function(e){};
    window.applicationCache.onobsolete = function(e){};
    window.applicationCache.ondownloading = function(e){};
    window.applicationCache.oncached = function(e){};
    window.applicationCache.onerror = function(e){}
    
    window.addEventListener('online',function(e){
        
    });
    
    window.addEventListener("offline",function(e){
        
    });
    
    /*
        将applicationCache状态代码转化成状态
    */
    showCacheStatus = function(n){
        statusMessages =  ['Uncached','Idle','Checking','Donwloading','Update Ready','Obsolete'];
    
        return statusMessages[n];
    }
    
    let install = function(){
        log("checking for updates");
        try{
            window.applicationCache.update();
        }cache(e){
            applicationCache.onerror();
        }
        
    }
    ...

HTML5离线WEB应用创建即使没有互联网连接也可以使用的应用程序。为确保应用中所需文件能够成功缓存，需要将这些文件指定在manifest文件中，随后在应用程序的主页面中进行引用。然后，添加监听器监听在线和离线状态的变化，进而基于因特网连接是否让网站执行不同的操作。