zoukankan      html  css  js  c++  java
  • [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方法缓存!

  • 相关阅读:
    C# 了解当前使用的语言版本
    Swagger api 接口管理 使用总结
    Git 常见错误操作
    NestJs 详解
    推荐一个NodeJS 框架 AdonisJS
    Lavavel8.x
    @typegoose/typegoose. 使用技巧
    Typeorm
    Cocos2Dx(4)——动画
    Java程序员的C#学习笔记(1) C#和.NET Framework概览
  • 原文地址:https://www.cnblogs.com/zhenxianluo/p/6094638.html
Copyright © 2011-2022 走看看