HTML5离线应用

[cqupt-yifanwu]

本地缓存与浏览器缓存

• 本地缓存是为整个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(){
   //其他和离线存储有关的错误
}