HTML5API___manifest

离线缓存 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

oncached: null
onchecking: null
ondownloading: null
onerror: null
onnoupdate: null
onobsolete: null
onprogress: null
onupdateready: null
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的更多相关文章

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

随机推荐

详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
[大伽说]如何运维千台云服务器 » CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.L ...
N沟道和P沟道MOS FET开关电路
在电路中常见到使用MOS FET场效应管作为开关管使用.下面举例进行说明. 如图1所示,使用了P沟道的内置二极管的电路,此处二极管的主要作用是续流作用,电路是Li电池充放电电路,当外部电源断开时采用L ...
UI设计中与字号有关的知识
在我们设计APP.设计前端页面时,免不了要和各种文字大小打交道.字体的大小有多种单位,不明究里的话使用起来很容易出问题.今天整理了这方面的东西做了个图片,方便查看. 图上的资料来自互联网,感谢大家的负 ...
2016 Multi-University Training Contest 2 总结
第二次多校,出师未捷身先死欣君看了一下09题,高呼水题,迅速码好,一A. 我看了11题,发现分奇偶讨论即可,于是按思路写好,一A. 欣君搞鼓出01题的一个公式,于是我照着写,一WA.简直不可思议,发 ...
折腾slidingmenu
转自自己jekyll博客 alanslab.cn 第一次用gimp做这么大工程,出乎意料,蛮好用的.以前ps倒是蛮熟练的,只摸过两下gimp,感觉望而生畏.今天硬着头皮折腾了一阵子,发现最起码上图可 ...
JS isArray记录
var isArray=Function.isArray||function(0){ return typeof o === "object" && Object. ...
音乐ID3 中专辑封面解析(APIC帧)
ID3V2 中 APIC 帧标识专辑封面.前几天百度谷歌都没有找到具体的说明.有点小伤人. 最好参考 Android 中的 id3.cpp 以及一个java 开源 id3 库.找到这里的规格 ...
IOS开发:xcode5版本引发的问题
下面这段代码是用于处理ios7头部透明问题的 #if __IPHONE_OS_VERSION_MAX_ALLOWED >= 70000 if ( IOS7_OR_LATER ) { self.e ...
Page_Prerender介绍
它是asp.net页面的OnPreRender事件的处理程序.此事件是定义在Control类中的,因为Page类(aspx页面的基类)继承的是System.Web.UI.WebControl类,而We ...
jQuery为多个元素绑定相同的事件
方式一: // 假设$("#div1", "#divN")有多个对象$("#div1", "#divN").each(f ...

HTML5API___manifest

HTML5API___manifest的更多相关文章

随机推荐

热门专题