离线缓存 manifest

在html标签里面增加个属性 mainfest 就可以告诉浏览器缓存文件在哪里。

<html manifest='show.manifest' xmlns="http://www.w3.org/1999/xhtml">

show.manifest文件内容

CACHE MANIFEST  

# VERSION 0.3  

# 直接缓存的文件
CACHE:
index.html files/hammer.min.js
files/base.css files/cover_1.jpg
files/cover_2.jpg
files/cover_3.jpg
files/cover_4.jpg
files/top.png
files/btn.png
files/btn_active.png
files/bg.png

缓存内容中有 这个html文件本身 所需要的图片 、js、css等

如果页面中有资源进行了更新,一定要更新缓存文件,才能使浏览器读取新的网页。

Cache-manifest语法规则:

  字符编码使用UTF-8

  第一行必须是'CACHE MANIFEST'

  以“#”开头的注释

  URL必须与主页面同源

  MIME类型 text/cache-manifest

  CACHE/ FALLBACK /NETWORK   每2个标志之间都属于一个段落

  CACHE段落下 1行记录一个缓存资源文件

  FALLBACK用于指定URL不能访问时的替代资源

  NETWORK段落不进行缓存,必须指定网络访问URL。访问其它主机资源的时候可以在这里制定

FALLBACK:

online / missing.html

上面的意为: 当url 以online/ 开头的资源不能访问时  显示 missing.html

通过JS 操作缓存

applicationCache

  1. oncached: null
  2. onchecking: null
  3. ondownloading: null
  4. onerror: null
  5. onnoupdate: null
  6. onobsolete: null
  7. onprogress: null
  8. onupdateready: null
  9. status: 0

以上是 applicationCache的一些方法

  onchecking         // Checking 事件 第一次下载manifest文件的时候会出现

  onnoupdate          //Noupdate  检测到 不需要更新manifest的时候 触发该事件

  onprogress          //Progress  在manifest下载过程中周期性触发

  oncached          //Cached    缓存文件下载完毕 成功缓存以后 触发该事件

  onupdateready         //updateready  缓存更新成功事件

  onobsolete          //Obsolete  404  与410错误  触发改事件

  onerror          //Error     obsolete 、manifest存在的文件下载失败、获取manifest文件时发生错误、更新缓存文件时 manifest再次被更改
status;
        //缓存状态
/*
* 0 未缓存
* 1 空闲状态
* 2 检查中
* 3 下载中
* 4 更新准备中
* 5 过期状态
* */
       /*
* 在使用离线缓存的时候 先判断浏览器是否在线
* */
if(window.navigator.onLine){
//在线
} else {
//离线
}

HTML5API___manifest的更多相关文章

  1. HTML5之window.applicationCache对象

    不知道离线缓存技术的可以参照上一篇文章: HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译 参考文章 window.applicationCache  ...

随机推荐

  1. [原创]obj-c编程17:键值观察(KVO)

    原文链接:[原创]obj-c编程17:键值观察(KVO) 系列专栏链接:objective-c 编程系列 说完了前面一篇KVC,不能不说说它的应用KVO(Key-Value Observing)喽.K ...

  2. 函数指针 如:void (*oper)(ChainBinTreee *p)

    在C语言中,一个函数总是占用一段连续的内存区,而函数名就是该函数所占内存区的首地址.我们可以把函数的这个首地址(或称入口地址)赋予一个指针变量,使该指针变量指向该函数.然后通过指针变量就可以找到并调用 ...

  3. OpenNMS Log Correlator

  4. hdu4288 Coder

    Coder Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  5. uber在限制新司机加入了,看看新政策把

    您可以点击“车主奖励分组查询”输入您在系统注册的手机号查询您所在奖励分组 5月25日-5月31日 奖励明细 1. 成都优步合作车主第一组 奖励政策: (账户激活时间在2015年5月29日之前) *以下 ...

  6. background-size:的认识;

    background-size:100%;其实是元素的背景图片的宽度和元素宽度相同,高度auto: 也可理解为:background-size:100% auto; 而background:cover ...

  7. 程序猿的量化交易之路(20)--Cointrader之Assert实体(8)

    转载需说明出处:http://blog.csdn.net/minimicall, http://cloudtrade.top 不论什么可交易的都能够称之为Assert,资产.其类代码例如以下: pac ...

  8. 安卓activity捕获返回button关闭应用的方法

    安卓activity捕获返回button关闭应用的方法 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { //按下键盘 ...

  9. asp.net MVC Razor 语法(2)

    变量是用于存储数据的命名实体. 变量 变量用于存储数据. 变量名必须以字母字符开头,不能包含空格和保留字符. 变量可以是某个具体的类型,指示其所存储的数据类型.字符串变量存储字符串值 ("W ...

  10. HTML之学习笔记(三)文本标签

    标题标签 html的标题标签从h1~h6共六个级别,权值不断降低,即不断变小,不用使用CSS控制来取代h标签,因为网页搜索引擎通过搜索到你的页面,找到你页面的h标签并为h标签建立索引,如果h标签被替代 ...