TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

H5&C3之离线缓存

zyz
2019-04-12
/
0 评论
/
705 阅读
/
正在检测是否收录...
04/12

一、离线存储的好处

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

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

二、H5缓存机制

1-浏览器缓存机制
2-Dom Storage(Web Storage)存储机制
3-Web SQL Database存储机制
4-Application Cache(AppCache)机制
5-Indexed Database(IndexedDB)
6-File System API

三、Application Cache机制

离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用。当然,Html5新的特性都不是所有浏览器都能支持的,离线缓存也一样。反正IE9(包括)及IE9以下的浏览器目前是不支持的。如果用在移动端,应该都能支持。

Application Cache(AppCache)是为支持Web App离线使用而开发的缓存机制。它的缓存机制类似于浏览器的缓存机制,都是以文件为单位进行缓存,且文件有一定更新机制。但AppCache是对浏览器缓存机制的补充,不是代替。

AppCache在首次加载生成后,也有更新机制。被缓存的文件如果要更新,需要更新manifest文件。因为浏览器在下次加载时,除了会默认使用缓存外,还会再后台检查manifest文件有没有修改。发现有修改,就会重新获取manifest文件,对CACHE MANIFEST下文件列表检查更新。manifest文件与缓存文件的检查更新也准守浏览器缓存机制。

如果用户手动清了AppCache缓存,下次加载时,浏览器会重新生成缓存,也可算是一种缓存更新。

<script>
    if(window.applicationCache){
        alert("支持离线缓存");
    }
    else{
        alert("不支持离线缓存");
    }
</script>

二、搭建离线应用程序

  • 服务器设置头信息(在httpd.conf文件添加)

    // 注意最后是有空格隔开的
    AddType text/cache-manifest .manifest
    > 如果不配置httpd.conf文件,则每次都需要添加头部信息<?php header("content-type: text/cache-manifest"); ?>
    
  • html标签内添加

    <html manifest='xxx.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文件发生改变时,资源请求本身也会触发更新
赞(0)
评论 (0)
本篇文章评论功能已关闭