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

随机推荐

Linux进程管理命令
CentOS默认并没有安装上psmisc这个软件包,就是像pstree,fuser这类的命令就没有了.如果想要执行这些命令最好的方法就是手动的去安装它们解决方法: yum -y install ps ...
关于httpservletrequest的获取真实的ip
via 值为: 下面是一些DemoWTP/1.1 GDSZ-PS-GW010-WAP05.gd.chinamobile.com (Nokia WAP Gateway 4.0 CD3/ECD13_C/N ...
Linux(ubuntu)使用dd从iso制作win7安装u盘（读卡器一样），以及备份分区
转自我的独立博客:alanslab.cn 先吐个槽,早知道windows越用越慢,没想到太久不用还会坏... 昨天就遇到了这样一件事,电脑的光驱早拆了换硬盘托架了,只好翻出来以前手机的sd卡开刀,网上 ...
[Leetcode][Python]24: Swap Nodes in Pairs
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 24: Swap Nodes in Pairshttps://oj.leetc ...
ruby简单的基础 5
方法和代码块在Ruby中.{}或do...end之间的代码是一个代码块.代码块只能出如今一个方法的后边,它紧接在方法最后一个參数的同一行上,一般由yieldkeyword调用代码块中的代码. 方法是 ...
三维CAD塑造——基于所述基本数据结构一半欧拉操作模型
三维CAD塑造--基于所述基本数据结构一半欧拉操作模型(elar, B_REP) (欧拉操作三维CAD建模课程三维CAD塑造高曙明老师渲染框架 brep 带洞带柄 B_REP brep ...
Java操作mongoDB2.6的常见API使用方法
对于mongoDB而言,学习方式和学习关系型数据库差不太多開始都是学习怎样insert.find.update.remove,然后就是分页.排序.索引,再接着就是主从复制.副本集.分片等等最后就是 ...
如何查看npm配置？
npm config list //查看基本配置 npm config list -l //查看所有配置 npm本地安装与全局安装有什么区别? npm install grunt // 本地安装,则是 ...
js中的数组和字符串的一些方法
数组的一些方法: 1.join()和split()方法 <script type="text/javascript">var x;var a=new Array();a ...
GCD的使用和面试题集锦
GCD 分为异步和同步异步: dispatch_async ( 参数1 , { } 同步: dispatch_sync( 参数1 , { } 参数1 :队列队列分为两种: dispatch_get ...

HTML5API___manifest

HTML5API___manifest的更多相关文章

随机推荐

热门专题