• [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方法缓存!

  • 相关阅读:
    ZOJ 2158 Truck History
    Knight Moves (zoj 1091 poj2243)BFS
    poj 1270 Following Orders
    poj 2935 Basic Wall Maze (BFS)
    Holedox Moving (zoj 1361 poj 1324)bfs
    ZOJ 1083 Frame Stacking
    zoj 2193 Window Pains
    hdu1412{A} + {B}
    hdu2031进制转换
    openjudge最长单词
  • 原文地址:https://www.cnblogs.com/zhenxianluo/p/6094638.html
Copyright © 2020-2023  润新知