[html5]app离线缓存(Application Cache)

故名思意，这个接口就是让网页或者文件在本地缓存下来，优点是可以提高网站的加载速度，同理如果缓存全部文件到本地则可以离线浏览网页。

我们可以把那些框架文件和哪些陈年不变的图片文件缓存到本地，提高网站二次浏览的加载速度。

1.首先创建一个名叫index.appcache（文件名可以自己定义）的文件，index.appcache文件内容：

CACHE MANIFEST
#version 0.1.0
CACHE:
　　lib/framework7/css/framework7.ios.min.css
　　lib/framework7/css/framework7.ios.colors.min.css
　　lib/framework7/js/framework7.min.js
NETWORK:
　　*

说明：CACHE表示要缓存的文件，博主此时选了framework7框架的三个文件缓存到本地，因为不需要次次加载。NETWORK表示不需要缓存的文件（*的意义应该不用解释了吧），博主用version假装app版本号来控制文件的变动。

2.修改apach配置目录下的mime.types文件，博主用的是centos下搭建的apach服务器，搭建方法参见本人的置顶博文《www服务器架设linux+apache+mariadb+php》。

博主文件在/etc/httpd/conf/mime.types,打开文件（没有文件主动创建）尾部加入text/cache-manifest       appcache

 注：或者可以把index.appcache改成index.appcache.php，内容开头加入<?php header("Content-Type: text/cache-manifest"); ?>

3.然后在<html>出加入api名和文件的位置，表示监视index.appcache文件，一旦文件内容变化变刷新缓存。

 4. 添加页面页面的事件监听

window.addEventListener('load', function(e){
  window.applicationCache.addEventListener('updateready', function(e){
　　if(window.applicationCache.status==window.applicationCache.UPDATEREADY){
      window.applicationCache.swapCache();
      if(confirm('webapp有新版本更新，是否更新？')){
        window.location.reload();
      }
    }else{
      console.log('webapp为最新版！');
    }
  }, false)
}, false)

 代码里并没有值得说的内容，很短也没有什么特殊含义，值得注意是是：

1).缓存有两种方式，文件指定和添加manifest属性，只要页面有manifest属性都会进行缓存。

2).缓存的页面如果带有参数都会把每个带参数的缓存下来，比如index.html是要缓存的，则index.html?id=1也会被添加为一个不同的缓存，因此多参数的网页不建议用appcache方法缓存！

 

posted on 2016-11-23 17:56  Rnet  阅读(622)  评论(0)  编辑  收藏  举报

导航