H5离线缓存（applicationCache ）

最新推荐文章于 2024-07-19 10:24:06 发布

Friday--星期五

最新推荐文章于 2024-07-19 10:24:06 发布

阅读量951

点赞数 1

分类专栏： HTML 笔记文章标签： js javascript html html5

本文链接：https://blog.csdn.net/qq_45644092/article/details/105343852

版权

HTML 笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

离线缓存（applicationCache ）

离线缓存（applicationCache ）简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载，用在静态数据的网页或游戏比较好用，这些文件包括html、js、css、img等文件。当然，Html5新的特性都不是所有浏览器都能支持的，离线缓存也一样。反正IE9（包括）及IE9以下的浏览器目前是不支持的。如果用在移动端，应该都能支持。
其实在有网络的时候，浏览器也会优先使用已离线存储的文件。而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量

使用步骤：
检测是否支持离线缓存
if(window.applicationCache){
alert("支持离线缓存");
}
else{
alert("不支持离线缓存");
}
要引入manifest文件
<!DOCTYPE html>
<html lang="en" manifest="test.manifest"> 
//就是在这里引入，注意引入也是讲究路劲跟文件名的，这里文件名>是test，后缀是mainfest，路劲在当前的html下面
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
引入完了之后，接下来就是test.mainfest文件代码的编写

注意：以#开头的行表示的是注释。
3.1. 离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。

CACHE MANIFEST://必须以这个开头，在第一行
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
m.png
test.js
test.css
NETWORK:
*
FALLBACK
online.html offline.html
3.2. CACHE指定需要缓存的文件 NETWORK指定只有通过联网才能浏览的文件，*代表除了在CACHE中的文件 FALLBACK每行分别指定在线和离线时使用的文件(可选).
3.3. 这些应用需要服务器支持
Apache服务器开启支持的方式是：在conf/mime.types中添加一段代码：
test/cache-manifest manifest
3.4. IIS服务器开启方式：
右键–HTTP—MIME映射下，单击文件类型—新建—扩展名输入manifest，类型中输入:
test/cache-manifest
3.5. 如果无法建立因特网连接，则用 “404.html” 替代 /html5/ 目录中的所有文件。
FALLBACK:
　　/html5/ /404.html
　　下面的例子中，当任何页面无法访问时跳转到 “404.html”页。
FALLBACK:
　　*.html /404.html
3.6. 添加 manifest　属性的页面会自动被浏览器缓存，不需要再CACHE节点中再次添加。
目前为止就实现了离线缓存，再也不用担心第二次打开还耗费流量了，用在静态的手机网页或是游戏比较好用

缓存状态：window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态。
applicationCache.status的值如下：
0 === 未缓存
1 === 空闲（缓存为最新状态）
2 === 检查中
3 === 下载中
4 === 更新就绪
5 === 缓存过期
var appCache = window.applicationCache;
switch (appCache.status) {
   case appCache.UNCACHED: // UNCACHED == 0 
       return 'UNCACHED';
       break;
   case appCache.IDLE: // IDLE == 1 
       return 'IDLE';
       break;
   case appCache.CHECKING: // CHECKING == 2 
       return 'CHECKING';
       break;
   case appCache.DOWNLOADING: // DOWNLOADING == 3 
       return 'DOWNLOADING';
       break;
   case appCache.UPDATEREADY: // UPDATEREADY == 4 
       return 'UPDATEREADY';
       break;
   case appCache.OBSOLETE: // OBSOLETE == 5 
       return 'OBSOLETE';
       break;
   default:
       return 'UKNOWN CACHE STATUS';
       break;
}
浏览器与服务器的交互一般对于地址栏输入一个网址后发生：
1）、服务端返回baidu页面资源，浏览器载入html
2）、浏览器开始解析
3）、发现link，发送请求载入css文件
4）、浏览器渲染页面
5）、发现图片，发送请求载入图片，并重新渲染
6）、发送请求js文件，阻塞渲染。如果js对dom进行了操作，则会进行rerender
对于支持离线存储的页面，浏览器和服务器的交互情况：
1）、服务端返回baidu页面资源，浏览器载入html
2）、浏览器开始解析
3）、发现link，发送请求载入css文件
4）、浏览器渲染页面
5）、发现图片，发送请求载入图片，并重新渲染
6）、发送请求js文件，阻塞渲染。如果js对dom进行了操作，则会进行rerender
7）、请求页面中需要缓存的页面和数据，就算在之前的步骤中已经请求过（这是个耗能的地方）
8）、服务器返回所有请求文件，浏览器进行本地存储
再次载入页面：
1）：发送请求
2）：使用本地存储的离线文件
3）：解析页面
4）：请求服务端的manifest文件，判断是否有改变，返回304则表示没有改变进入步骤6，否则进入步骤5
5）：进入首次载入页面的7-8
6）：使用本地存储，不重新请求

更新缓存:
三种方式，可以更新缓存:
A. 更新manifest文件
B. 通过javascript操作
C. 清除浏览器缓存

//利用定时器隔一定时间自动更新一下缓存
setInterval(function(){applicationCache.update();
},50000);

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

再介绍一下缓存相关的事件:
1、updateready事件：当有新的缓存，并更新完以后，会触发此事件。

applicationCache.addEventListener("updateready",function(){
 alert("缓存更新完成");
},false);

2、progress事件：当有新的缓存，并处于正在下载的过程中时，会不断触发此事件。progress中的event对象包含：loaded和total。loaded代表当前已经加载完成的文件，total为总共需要更新的文件数。

applicationCache.addEventListener("progress",function(){
alert(applicationCache.status); //3... 3表示正在下载
},false);

manifest解析机制:

注意事项:

站点离线存储的容量限制是5M
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
在manifest中使用的相对路径，相对参照物为manifest文件
CACHE MANIFEST字符串应在第一行，且必不可少
系统会自动缓存引用清单文件的 HTML 文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新