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

随机推荐

OSG中的几何体
osg::Shape类继承自osg::Object类: osg::Shape类是各种内嵌几何体的基类,不但可以用于剔除和碰撞检测,还可用于生成预定义的几何体对象: 常见的内嵌几何体包括: osg:: ...
C语言入门（11）——switch分支语句
C语言提供了一种用于多分支选择的switch语句, 其一般形式为: switch(表达式) { case 常量表达式1:语句1; break; case 常量表达式2:语句2; break; .... ...
2016 Multi-University Training Contest 5&6 总结
第五场和第六场多校都打得很糟糕. 能做到不以物喜不以己悲是假的,这对队伍的情绪也可以算上是比较大的打击. 很多时候我们发现了问题,但是依旧没有采取有效的方法去解决它,甚至也没有尝试去改变.这是一件相当 ...
#include <iostream>
1 static_assert 2 std::nothrow 3 std::ref() 4 std::string 1 static_assert 执行编译时断言检查语法 static_assert ...
iOS获取手机当前的网络状态
获取iOS网络状态,目前有两个办法. 1.通过监听手机状态栏的信息. 2.通过使用官方提供的类Reachability. 一.通过手机监听手机状态栏的信息好处: 1.可以通过苹果的审核上架AppSt ...
dijkstra 优先队列最短路模板
;;*maxn];,):id(a),dist(b){} )); ;i<=n;i++)dist[i]=inf; dist[st]=; ;i= ...
openvswitch常用操作
原理讲解: 当我们创建一个交换机(网桥)之后即(ovs-vsctl add-br brname),此时网络功能不受影响,但是会产生一个虚拟网卡,名字为brname(与网桥名字同名,可以使用 ifcon ...
Linux分区方案
创建三个分区 1./boot 启动分区存放内核和启动程序空间分配:100M 类型:ext4 2./swap 交换分区虚 ...
Unity5UGUI 官方教程学习笔记（二）Rect Transform
Rect Transform Posx Posy Posz : ui相对于父级的位置 Anchors :锚点定义了与父体之间的位置关系一个锚点由四个锚组成四个锚分别代表了 ...
一道面试题细说C++类型转换
开篇先说这道面试题: class ClassA { public: virtual ~ ClassA() { } virtual void FunctionA() { } }; class Class ...

HTML5API___manifest

HTML5API___manifest的更多相关文章

随机推荐

热门专题