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

随机推荐

erlang学习笔记(2）
函数%###geometry.erl###-module(geometry). 定义-export([area/1, function1/2, function2/0, ...]).area({rec ...
java积累
数组的使用 package javaDemo; import java.util.*; /** * * @author Administrator * @version 1.0 * * */ publ ...
Windows Azure 社区新闻综述（#70 版）
欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章.视频和博客文章 · 如何选择 No ...
c++多线程编程之互斥对象(锁)的使用之----死锁
一.死锁会在什么情况发生 1.假设有如下代码 mutex; //代表一个全局互斥对象 void A() { mutex.lock(); //这里操作共享数据 B(); //这里调用B方法 mu ...
JEECMS用法总结
1.循环打印栏目: [@cms_channel_list] [#list tag_list as c] <li id="${c.path}"><a href=&q ...
iOS iOS9下修改回HTTP模式进行网络请求
升级为iOS9后,默认请求类型为https,如何使用http进行请求会报错 The resource could not be loaded because the App Transport Sec ...
CM 0313 Review
中午无聊看了贴吧,看到有人截图说CM有爱的故事.看到SE03CH13,觉得图有点印象,似乎我很是记得这一集.于是刚才看了一下,嗯,果然记得.是我头一次翻译美剧的时候,7年前. 剧情还可以吧,剧中的Ji ...
小鱼提问2 属性访问器中get,set再用public修饰行吗，private呢？
/// <summary> /// 是否有一个用户正在连接服务器中 /// </summary> public bool IsConnectting { get { retur ...
TCP/IP的网际层协议——ICMP
ICMP经常被认为是IP层的一个组成部分.它携带于IP数据包中,ICMP封装在IP数据包内部: IP首部 ICMP数据包下面是一份差错报文的例子: 最右边的+或者-代表该报文是查询报文还是错误报文. ...
Linux学习之Makefile文件的编写
转自:http://goodcandle.cnblogs.com/archive/2006/03/30/278702.html 目的: 基本掌握了 make 的用法,能在Linux系统上编 ...

HTML5API___manifest

HTML5API___manifest的更多相关文章

随机推荐

热门专题