HTML5离线应用

本地缓存与浏览器缓存

• 本地缓存是为整个web应用程序服务的而网页缓存值服务与单个网页
• 本地缓存是为你指定的资源进行缓存，而咱们不知道网页缓存会春初哪些内容，他是不安全不可靠的
• 在没有网络的时候仍是能够访问到以缓存的对应的站点页面，其中这些文件能够包括html，js，css，img等等文件，但其实即便在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。

manifest文件

web应用程序的本地缓存是经过每一个页面的manifest文件来管理的，这个文件是一个简单的文本文件，能够在这个里面指定要缓存的资源文件的资源名称。能够为单独页面指定也能够对整个web应用程序指定一个总的manifest文件。同时也要对服务器进行设置，让服务器支持text/cache-manifest这个MIME类型。
manifest的大概写法

• CACHE MANIFEST

  CACHE MANIFEST // 这一行是必须的是必须的，告知浏览器须要进行本地缓存

  /theme.css

  /logo.gif

  /main.js

以此告诉浏览器对本地服务器的一些资源进行具体设置,上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。而后，不管用户什么时候与因特网断开链接，这些资源依然是可用的。

• NETWORK

  白名单，使用通配符"*". 则会进入白名单的open状态. 这种状态下.全部不在相关Cache区域出现的url都默认使 用HTTP相关缓存头策略.或者写出不须要缓存的文件，这 些文件都不会进行本地缓存。
• FALLBACK
  每行指定两个资源文件，第一个资源文件为可以在线访问时使用的资源文件，第二个资源文件为不能在线访问时使用的备用文件。

• 指定上述文件，能够用相对路径，也能够用绝对路径，都是ok的。可是绝对路径要加上http://

浏览器和服务器交互过程要点

1. 当浏览器处理manifest文件时，会向服务器请求你的manifest中指定的文件，即便你刚刚已经请求过了，这里还须要进行重复的请求
2. 浏览器接收到服务器发送来的文件以后会对本，存入包括页面自己在内的全部要求本地缓存的资源文件，而且触发一个时间代表更新完毕，HTML5 的更新策略与HTTP缓存策略一致，咱们能够点击，须要注意的是，修改了一些文件之后想要让离线存储更新，就必须改动manifest清单文件。（由于manifest文件还足够新鲜，不须要与服务器进行新鲜度验证）
3. 当资源被修改过以后，浏览器会向服务端请求新的manifest文集，而后对资源进行更新存入新的资源并触发更新完成事件，须要注意的是既是文件资源被修改过了已经装入页面的文件不会忽然变为新的文件资源，也就是说当你再次加载的时候才会看到新的资源。

经过JS动态控制更新

applicationCache对象表明了本地缓存，它提供个了一些方法和事件，管理离线存储的交互过程。经过在firefox8.0的控制台中输入window.applicationCache能够看到这个对象的全部属性和事件方法。
当咱们不适用applicationCache的时候页面内容更新是在下一次打开本页面的时候更新吗若是使用了applicationCache的时候能够当即被更新。下面咱们来看一下它的一些属性和方法。

• 当文件资源更新完毕的时候会触发onUpdateReady事件
  applicationCache.onUpdateReady = function(){ //第二次载入，若是manifest被更新 //在下载结束时候触发 //不触发onchched alert("本地缓存已经更新，您能够刷新页面来获得本程序的最新版本"); }

• swapCache方法，该方法用来手工执行本地缓存

  applicationCache.onUpdateReady = function(){
   //第二次载入，若是manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否从新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
  }

  也就是说若是不调用该方法，用户须要手动刷新页面才能看到更新后的方法
  ```
• 另外还有其余的方法以下

applicationCache.onchecking = function(){
   //检查manifest文件是否存在
}

applicationCache.ondownloading = function(){
   //检查到有manifest或者manifest文件
   //已更新就执行下载操做
   //即便须要缓存的文件在请求时服务器已经返回过了
}

applicationCache.onnoupdate = function(){
   //返回304表示没有更新，通知浏览器直接使用本地文件
}

applicationCache.onprogress = function(){
   //下载的时候周期性的触发，能够经过它
   //获取已经下载的文件个数
}

applicationCache.oncached = function(){
   //下载结束后触发，表示缓存成功
}

application.onupdateready = function(){
   //第二次载入，若是manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否从新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到文件，返回404或者401时候触发
}

applicationCache.onerror = function(){
   //其余和离线存储有关的错误
}