构建离线WEB应用

HTML5添加localstroage和应用缓存作为离线缓存。两种缓存都有各自的应用场景。今天我们就来说说应用缓存的解决方案。在网络中使用缓存的原因之一是支持离线应用程序。其他优点：减少对网络资源的请求（减轻服务器压力）。与网络加载资源相比，加载本地资源速度更快，体验更好。在断网情况下，能够提供良好用户体验（断网加载）的资源通常缓存包括：HTML文档、JS文件、CSS文件、图片、多媒体应用缓存缓存的资源文件，通常存放在浏览器的持久化存储资源中，即就是在本地硬盘上使用HTML5离线WEB应用API：1.检查浏览器是否支持if(window.applicationCache){//则支持离线缓存}2.在html文档的HTML元素中添加manifest特性，如下：3.在application.appcache文件中，定义缓存文件列表，如：CACHEMANIFEST4。支持离线行为HTML5引入了一些新的事件允许应用程序检测网络连接是否正常。通过这种方式，您可以控制应用程序在离线和在线时的不同行为。在HTML5中，可以通过检测window.navigator对象来判断。navigator.onLine是一个布尔属性，表示浏览器是否在线。我们可以使用如下代码进行判断：对应判断：functionloadDemo(){if(navigator.onLine){log("online")}else{log("offline")}}//添加事件window.addEventListener("在线",函数(e){日志("在线")});5.manifest文件离线应用包含一个manifest文件，里面列出了浏览器为离线应用缓存的所有资源列表。manifest文件的MIME类型为text/cache-manifestfileexample:CACHEMANIFEST#要替换的文件about.htmlhtml5.cssindex.htmla.gifb.jpg#不缓存文件#每次从中拉取新文件服务器端，因为浏览器会缓存，为了保证每次在服务器上的内容都是最新的，这里应该是NETWORKsignup.html#获取不到资源文件时的备用资源路径，一般在出现404时，它将离线使用FALLBACKsignup.html。html#当访问signup.html出现404时，会去offline.html/app/ajaxoffline.html#当访问/app/ajax路径下的内容出现404时，会去offline.html6、applicationCacheAPIapplicationCacheAPI是操作应用程序缓存的接口。window.applicationCache.status，表示缓存的状态，一共有6种，如下表：数值属性缓存状态说明0UNCACHED（未缓存）没有指定缓存列表1IDLE（空闲）有缓存列表应用status，表示所有文件都已被缓存2CHECKING（正在检查）3DOWNLOADING（下载）14UPDATEREADY（更新准备好）15OBSOLETE（过期）1个相关事件OncheckingCHECKINGOndownloadingDOWNLOADINGOnupdatereadyUPDATEREADYonobsoleteOBSOLETEOncachedIDLE未更新时发生错误发生更新，onerroronnoupdateonupdateonprogressatewindow。更新缓存，包括检查清单文件的新版本，以及下载必要的新资源。如果没有缓存，或者缓存已经过期，就会抛出错误。7.正在运行的应用缓存如果应用使用了离线缓存，浏览器在应用缓存中成功缓存manifest列表的内容后，会优先从缓存中获取资源。之后，浏览器只会做一件事，就是检查manifest文件是否被更改，过程如下：第一次访问，当浏览器加载页面及其资源解析页面时，浏览器会解释manifest属性HTML元素，然后加载CACHE和FALLBACK部分列出的文件，到xxx.com应用的缓存中，当浏览器有超过5M的存储空间，再次访问应用网站时，浏览器会加载资源文件从缓存中。同时，如果应用在线，会离线检查manifest文件是否更新。Browse浏览器会从资源缓存中加载，访问NETWORK资源时，会加载FALLBACK的内容。当应用上线，缓存文件列表中的某个文件被修改，但manifest没有更新（nochange）时，浏览器仍然会从浏览器缓存中加载该文件。这时候你需要稍微修改manifest文件中的字符（一般是版本号），浏览器就会加载最新的manifest文件。当缓存文件被修改时，manifest文件也被修改，但是当你刷新浏览器时，你看到的仍然是原来的缓存内容，因为当页面在服务器执行服务器检查之前从应用程序缓存中加载资源时，浏览器不会自动更新加载的页面。可以关闭浏览器再打开，也可以通过updateready事件绑定监听，提示用户刷新。使用HTML5离线应用程序（applicationCache）构建应用服务器：1.服务器配置2.创建清单文件客户端：3.构建HTML，在HTML标签中添加manifest属性。属性值为服务器Name上配置的缓存资源列表的文件4.配置相关事件，创建离线JavascriptJs文件内容：window.applicationCache.onchecking=function(e){log("")}window.applicationCache.onnoupdate=函数（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("离线",function(e){});/*将applicationCache状态代码转换为状态*/showCacheStatus=function(n){statusMessages=['Uncached','Idle','Checking','Donwloading','UpdateReady','Obsolete'];返回状态消息[n]；}让安装=function(){log("检查更新");尝试{window.applicationCache.update();}cache(e){applicationCache.onerror();}}...HTML5离线WEB应用创建即使没有网络连接也可以使用的应用为了保证应用中需要的文件能够成功缓存，需要在manifest文件中指定这些文件，然后在manifest文件中引用应用程序的主页。然后，添加在线和离线状态变化的监听器，然后让网站根据是否连接到互联网执行不同的动作。