构建离线WEB应用

时间 2019-11-10

标签构建离线 web 应用栏目 HTML 繁體版

原文原文链接

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

web当中使用缓存的缘由之一是为了支持离线应用，其它优势：html

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

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

使用HTML5离线WEB应用API：web

一、检查浏览器是否支持ajax

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

二、在html文档的HTML元素上添加manifest特性，以下：浏览器

<html manifest='application.appcache'>
        <head></head>
        <body></body>
    </html>

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

CACHE MANIFEST

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

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

五、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

六、applicationCache API
applicationCache API是一个操做应用缓存的接口。app

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文件，并下载必要的新资源，若是没有缓存，或者缓存已过时，则会抛出错误。

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

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

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

服务端：
    一、服务器配置
    二、建立manifest文件
    
    客户端：
    三、构建HTML，并在HTML标签上添加manifest属性，属性值是服务器上配置的缓存资源列表的文件名
    四、配置相关事件，建立离线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文件中，随后在应用程序的主页面中进行引用。而后，添加监听器监听在线和离线状态的变化，进而基于因特网链接是否让网站执行不一样的操做。