H5离线缓存技术Application Cache

1、离线缓存技术：是浏览器本身的一种机制

HTML5引入Application Cache（应用程序缓存）技术，离线存储可以将站点的一些文件存储在本地，在没有网络的情况下可以访问到已缓存的对应的站点页面，这些文件包括html、js、css、img等文件；其实在有网络的时候，浏览器也会优先使用已离线存储的文件。而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。

2、离线本地存储和传统的浏览器缓存的区别

　　浏览器缓存主要包含两类：

Last-modified,Etag

浏览器向服务器询问页面是否被修改过，如果没有修改就返回304，浏览器直接浏览本地缓存文件,否则服务器返回新内容

彻底缓存：cache-control,Expires

通过Expires设置缓存失效时间，失效之前不再跟服务器请求交互

离线存储为整个web提供服务，浏览器缓存只缓存单个页面
离线存储可以指定需要缓存的文件和哪些文件只能在线浏览，浏览器缓存无法指定
离线存储可以动态通知用户进行更新

3、Application Cache带来的三大优势：

　　a、离线浏览

　　b、提升页面载入速度

　　c、降低服务器的压力

4、Application Cache包括：

　　a、Manifest文件：是一个简单的文本文件，扩展名任意，定义需要缓存的文件和资源，当第一次打开时，浏览器会自动缓存相应的资源

　　b、Application Cache文件

　　c、特点：Manifest文件必须有变化才更新，一次必须更新manifest文件中的所有文件下次才能生效

　　d、Manifest的特点：

　　　　　1>离线浏览：当网络断开时，可以继续访问你的页面

　　　　　2>访问速度快：将文件缓存到本地，不需要每次都从网络上请求

　　　　 3>稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障继续访问本地缓存

5、如何实现：

　　a、离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的

CACHE MANIFEST//必须以这个开头，在第一行
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

　　b、CACHE指定需要缓存的文件 NETWORK指定只有通过联网才能浏览的文件，*代表除了在CACHE中的文件 FALLBACK每行分别指定在线和离线时使用的文件(可选)

　　c、最后别忘了，这些应用需要服务器支持

Apache服务器开启支持的方式是：在conf/mime.types中添加一段代码：

test/cache-manifest manifest

　　d、IIS服务器开启方式：

右键--HTTP---MIME映射下，单击文件类型---新建---扩展名输入manifest，类型中输入test/cache-manifest

　　e、下面的例子中，如果无法建立因特网连接，则用 “404.html” 替代 /html5/ 目录中的所有文件。

　　FALLBACK:
　　/html5/ /404.html

　　下面的例子中，当任何页面无法访问时跳转到 “404.html”页。

　　FALLBACK:
　　*.html /404.html

　　f、添加 manifest　属性的页面会自动被浏览器缓存，不需要再CACHE节点中再次添加。

6、浏览器与服务器的交互

一般对于地址栏输入一个网址后发生：

　　1）、服务端返回baidu页面资源，浏览器载入html

　　2）、浏览器开始解析

　　3）、发现link，发送请求载入css文件

　　4）、浏览器渲染页面

　　5）、发现图片，发送请求载入图片，并重新渲染

　　6）、发送请求js文件，阻塞渲染。如果js对dom进行了操作，则会进行rerender

对于支持离线存储的页面，浏览器和服务器的交互又是如何呢？

首次载入页面：

　　1）-6）：同上

　　7）：请求页面中需要缓存的页面和数据，就算在之前的步骤中已经请求过（这是个耗能的地方）

　　8）：服务器返回所有请求文件，浏览器进行本地存储

再次载入页面：

　　1）：发送请求

　　2）：使用本地存储的离线文件

　　3）：解析页面

　　4）：请求服务端的manifest文件，判断是否有改变，返回304则表示没有改变进入步骤6，否则进入步骤5

　　5）：进入首次载入页面的7-8

　　6）：使用本地存储，不重新请求

7、如何更新缓存

如下三种方式，可以更新缓存：

更新manifest文件
通过javascript操作
清除浏览器缓存

如何通过js动态控制更新？

applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所有属性和事件方法

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(){
   //其他和离线存储有关的错误
}

H5离线缓存技术Application Cache

H5离线缓存技术Application Cache

猜你喜欢