离线缓存 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. IE WebDriver 因保护模式无法启动的解决 (转载)

    现在Win7 已经应用很多了,即使是最原始的Win7 也是IE8,最新的patch后,都升到了IE11 Win7下预装高版本IE的情况下,启动IE WebDriver可能会出现: org.openqa ...

  2. 微信网页授权java实现

    功能:主要用于在用户通过手机端微信访问第三方H5页面时获取用户的身份信息(openId,昵称,头像,所在地等..)可用来实现微信登录.微信账号绑定.用户身份鉴权等功能.     开发前的准备: 1.需 ...

  3. openssl编译(VC6.0)

    官网:http://www.openssl.org/ 得到源码: git clone  https://github.com/openssl/openssl 一.用vc编译器编译: 1.下载nasm: ...

  4. 细说javascript函数

    javascript函数是一个比较奇怪的东西,接触一段时间你就会犯迷糊,弄不明白它到底是什么了.你是否会因为有的javascript函数没有名字而莫名其妙,是否会因为javascript函数的参数没有 ...

  5. vagrant打造自己的开发环境

    vagrant打造自己的开发环境 缘由: 在网上看到斌哥,爽神都写了关于vagrant的博客,都在说很强大,所以很好奇这玩意怎么个强大,然后也就自己来一发玩玩看看. 真实缘由: 说实话是电脑配置太低, ...

  6. MCI 函数与命令

    Microsoft 提供的 MMSYSTEM.H 文件中定义了调用 MCI 功能的数据类型和函数原型.在使用 MCI 功能的任何源模块中都应包含该文件. 1. MCI 函数 所有的 MCI 函数名都以 ...

  7. MongoDB Error

    ①,org.springframework.core.convert.ConverterNotFoundException: No converter found capable of     con ...

  8. json中头疼的null

    在服务器返回 json 数据的时候,时常会出现如下数据 "somevalue":null 这个时候,json 解析的时候,就会吧这个 null 解析成 NSNull 的对象,我们向 ...

  9. calltree看代码调用图

    calltree是在linux下面看c代码(尤其是复杂的内核代码)的神器. 推荐  calltree+vim + ctags + cscope + taglist [ vim: 搭建vim看代码的环境 ...

  10. Oracle游标使用详解

    转自:http://www.cnblogs.com/sc-xx/archive/2011/12/03/2275084.html 声明游标:CURSOR cursor_name IS select_st ...