离线缓存 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

  1. oncached: null
  2. onchecking: null
  3. ondownloading: null
  4. onerror: null
  5. onnoupdate: null
  6. onobsolete: null
  7. onprogress: null
  8. onupdateready: null
  9. 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的更多相关文章

  1. HTML5之window.applicationCache对象

    不知道离线缓存技术的可以参照上一篇文章: HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译 参考文章 window.applicationCache  ...

随机推荐

  1. scanf和gets的区别

    scanf和gets获取字符串时的区别  在C语言中,能构获取字符串的函数至少有两个:  1.scanf()   所在头文件:stdio.h  语法:scanf("格式控制字符串" ...

  2. android ViewHolder 使用

    android中使用ListView   ExpandableListView  数据适配器adapter很多都是自己定义,自己定义数据适配器时,要重写getView.重写getView为了不让每次调 ...

  3. wpf中的触发器详解

    原文 http://zwkufo.blog.163.com/blog/static/25882512009724113250883/ 7.1.2 简单逻辑的表示--触发器(1) 在本章的多处介绍中都会 ...

  4. 转:CSS布局奇淫技巧之-宽度自适应

    css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...

  5. git Bug分支

    Bug分支 软件开发中,bug就像家常便饭一样.有了bug就需要修复,在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支删除. 当你接 ...

  6. 面向对象程序设计-C++_课时22向上造型

    赋值兼容规则是指在公有派生情况下,一个派生类的对象可以作为基类的对象来使用的情况. 约定类derived是从类base公有派生而来的,则指如下3种情况: (1)派生的对象可以赋给基类的对象.例如: d ...

  7. Matrix Swapping II(求矩阵最大面积,dp)

    Matrix Swapping II Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  8. C#文件压缩

    /// <summary> /// 文件压缩 /// </summary> /// <param name="filesUrl">多个文件路径& ...

  9. matlab如何保存figure中去掉白边的图片

    输出图片成可直接调入的灰度图,设置输出图片空白边距,以及调整图片大小,纵横比. 一.先显示图片,imshow.如果是plot,或者newplot,直接看“三”.imshow(strain_image, ...

  10. iOS隐藏tabBar的方法

    两种方法用来隐藏tabBar 1.在本页面隐藏 #pragma mark - 隐藏tabBar - (void)viewWillAppear:(BOOL)animated{ self.tabBarCo ...