离线缓存 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. 让vs2010的html编辑器验证html5语法

    或者在Tools -> option -> Text Editor -> Html -> Validation

  2. 源码学习之ASP.NET MVC Application Using Entity Framework

    源码学习的重要性,再一次让人信服. ASP.NET MVC Application Using Entity Framework Code First 做MVC已经有段时间了,但看了一些CodePle ...

  3. 修改 tomcat 内存

    在Jetty 的VM参数中设置: -Xms256m -Xmx512m -XX:MaxNewSize=256m -XX:MaxPermSize=256m 在tomcat运行环境中设置: window环境 ...

  4. Oracle EBS-SQL (SYS-18):检查系统安装的各个表是否打开(PJM%).sql

    select status, trigger_name from all_triggers where trigger_name like 'PJM%'; ALTER TRIGGER PJM_ORG_ ...

  5. eclipse快捷键说明

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行  Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt ...

  6. Delphi通过IE窗口句柄获取网页接口(IWebBrowser2) good

    主要用到的是MSAA(Microsoft Active Accessibility) 函数:ObjectFromLResult,该函数在动态链接库 oleacc.dll 中定义. uses SHDoc ...

  7. C++ string实现原理

    C++程序员编码过程中经常会使用string(wstring)类,你是否思考过它的内部实现细节.比如这个类的迭代器是如何实现的?对象占多少字节的内存空间?内部有没有虚函数?内存是如何分配的?构造和析构 ...

  8. applet部署,无需修改客户端设置。

    1  开发applet程序,编译成jar包 2  给jar包做数字签名: (1).用keytool生成密钥: keytool -genkey -keystore myapplet.keystore - ...

  9. HDU 1879 继续畅通工程 (Prim(普里姆算法)+Kruskal(克鲁斯卡尔))

    继续畅通工程 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  10. HDU 4937 Lucky Number 规律题_(:зゝ∠)_

    把全部合法的进制打出来会发现合法的进制都是在 n/3 n/4 n/5的边上 然后暴力边上的进制数.. #include <cstdio> #include <set> type ...