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自学笔记（5）:CSS的样式
CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓. 一.CSS-背景 CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景. p {background-col ...
atoi函数和atof函数
1.函数名:atoi 功能:是把字符串转换成整型数的一个函数,应用在计算机程序和办公软件中名字来源:alphanumeric to integer 用法:int atoi(const char *n ...
Tempo 2.0
Tempo 2.0 Tempo is an easy, intuitive JavaScript rendering engine that enables you to craft data tem ...
Android @+id与@id的区别
Android中的组件需要用一个int类型的值来表示,这个值也就是组件标签中的id属性值.id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等. 如果在@ ...
在Prefetcher中取消robots.txt的限制
Robots.txt是一种专门用于搜索引擎网络爬虫的文件,当构造一个网站时,如果作者希望该网站的内容被搜索引擎收录,就可以在网站中创建一个纯文本文件robots.txt,在这个文件中,声明该网站不想被 ...
Android中adb push和adb install的使用区别
Android中adb push和adb install的使用区别转载本篇文章由史迎春(@三俗小女子)投稿.转载请注明原文地址. 在Android实际开发中,经常会使用adb命令,安装应用程序可 ...
sql查询当天数据
向数据库中添加日期 MS SQL SERVER: NSERT into student(studentid,time1)values('15',getdate()); MY SQLinsert int ...
iOS实践01
去年放假之前大概完成了新浪微博项目,到现在也忘得差不多了,打算在重新写一遍.之前的一些笔记在新浪的博客SleenXiu,在这主要是把新浪微博以随笔的形式写在这,方便以后的复习. 先看看之前主要完成的几 ...
CreateEvent，OpenEvent成功后是否需要::CloseHandle(xxx); 避免句柄泄漏
bool bExist = false; HANDLE hHandle = ::CreateEvent(NULL, FALSE, FALSE, L"Global\\xxxxx_name ...
php 解析xml 的四种方法（转）
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...

HTML5API___manifest

HTML5API___manifest的更多相关文章

随机推荐

热门专题