美文网首页Web前端之路让前端飞H5
05、HTML5-离线缓存application cache

05、HTML5-离线缓存application cache

作者: EndEvent | 来源:发表于2017-06-02 17:21 被阅读134次

    一、离线存储的好处

    • 没有网络时,可以正常访问
    • 快速响应页面,不必用多个HTTP占用资源带宽
    • 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源
    • 缓存的可以是任何文件

    离线存储,关键在于没有网络时的操作;本地存储不一样,有无网络都是一样,就是将数据保存到本地中;

    二、搭建离线应用程序

    • 服务器设置头信息(在Apache中的httpd.conf文件添加)
      // 注意最后是有空格隔开的
      AddType text/cache-manifest .manifest
    

    如果不配置httpd.conf文件,则每次都需要添加头部信息<?php header("content-type: text/cache-manifest"); ?>

    • html标签内添加
    // 需要创建一个cache.manifest的文件
    <html manifest='cache.manifest'></html>
    
    • 写manifest文件: 离线清单列表
      - CACHE MANIFEST: 后面即是离线清单列表
      - FALLBACK: 第一个网络地址没有获取到,就走第二个缓存
      - NETWORK: 无论缓存中存在与否,均从网络获取
    
      CACHE MANIFEST  
    
      #VERSION 1.0  
      
      CACHE:  
      index.html  
      ./js/jquery.js  
    

    CACHE MANIFEST:文件标识
    #VERSION 1.0: 版本号,只是一行注释,但改变可以更新缓存
    CACHE:表示要缓存的文件

    更新缓存的方式,更新manifest文件
    浏览器发现manifest文件本身发生变化,便会根据新的manifest文件去获取新的资源进行缓存。
    修改一下manifest文件,把version改为1.1,然后刷新页面

    注意:
    1、站点离线存储的容量限制是5M
    2、引用manifest的html必须与manifest文件同源,在同一个域下
    3、当manifest文件发生改变时,资源请求本身也会触发更新

    相关文章

      网友评论

        本文标题:05、HTML5-离线缓存application cache

        本文链接:https://www.haomeiwen.com/subject/rinnxxtx.html