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 ...

随机推荐

NOI2015 Day2
NOI2015 Day2 荷马史诗题目描述:给出$n$个数,要求$n$个$k$进制数来对应这$k$个数(允许有前导零),$n$个$k$进制数互不为前缀,求$n$个数乘以对 ...
ora-01031:insufficient privileges 解决方案
sqlplus /as sysdba 连补上,ora-01031的解决方法: (1)检查sqlnet.ora是否包含这句话:SQLNET.AUTHENTICATION_SERVICES=(NTS),没 ...
poj1657---chessboard
对棋盘横纵坐标的解读 str1="f3" str2="e9" x=abs(str1[0]-str2[0]) y=abs(str1[1]-str1[1]) 如果x ...
Cocos2D-x权威指南：核心类成员CCNode
节点类(CCNode)是Cocos2D-x中的主要类,继承自CCObject.继承关系如图3-2所看到的. 不论什么须要画在屏幕上的对象都是节点类. 最经常使用的节点类包含场景类(CCScene).布 ...
vs2010调试快捷键
VS2010单步调试 1.设置断点 F9设置或者取消断点,如果当前行未设置断点,则F9可以再当前行设置断点,如果已经设置,则为去除断点 2.单步调试 F10不进入函数单步,F11进入函数单步 , ...
JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)
一.动态原型模式在面向对象学习六中的随笔中,了解到组合构造函数模式和原型模式创建的自定义类型可能最完善的!但是人无完人,代码亦是如此! 有其他oo语言经验的开发人员在看到独立的构造函数和原型时,很可 ...
Orcale语句大全
原文地址:http://www.cnblogs.com/omygod/archive/2007/08/31/876620.html Oracle 语句大全 1. Oracle安装完成后的初始口令? ...
使用x manager 连接Linux桌面
/usr/bin/xterm -ls -display $DISPLAY 需要安装xterm 服务
debug jdk
1.解压jdk安装路径中的src.zip如:c:\src. 注意一般只选择编译java javax org 三个文件夹就足够了,剩余的文件夹删除掉 2.列出要编译的源文件:dir /B /S /X c ...
Hibernate session.saveOrUpdate()方法
saveOrUpdate()方法同时包含了save()与update()方法的功能, 如果传入的参数是临时对象,就调用save()方法: 如果传入的参数是游离对象,就调用update()方法: 如果传 ...

HTML5API___manifest

HTML5API___manifest的更多相关文章

随机推荐

热门专题