离线缓存 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. Apache开启expires响应头,优化缓存

    apache开始expires响应头输出 expires是什么 指示资源什么时候过期的时间值(GMT时间),在指定的过期时间前,浏览器可以直接使用自身缓存的版本,而不用向服务器发请求,大大减轻服务器压 ...

  2. poj1833---字典序算法

    题意:给定一个序列,求它的下k个排列 #include <stdio.h> #include <stdlib.h> int cmp(const void *a,const vo ...

  3. C语言 linux环境基于socket的简易即时通信程序

    转载请注明出处:http://www.cnblogs.com/kevince/p/3891033.html      ——By Kevince 最近在看linux网络编程相关,现学现卖,就写了一个简易 ...

  4. 修改spinner选中以后显示的字体颜色

    原来spinner选中以后显示的view  还是textview  ,这样就是可以设置它的字体颜色了 sp.setOnItemSelectedListener(new OnItemSelectedLi ...

  5. 布线问题(prime)

    布线问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有 ...

  6. 神器之“c#反编译工具“

    1. ".net reflector"本人正在使用,下载地址 2."ILSpy"没实用过,可是听杨中科老师说挺好. 有了这个,妈妈再也不用操心我看不到别人封装好 ...

  7. 一道java面试题-方法静态分派

    一道面试题,以下程序的输出是? public class StaticDispatch { static abstract class Human{ } static class Man extend ...

  8. 经常使用的DB2命令(2)

    catalog数据库: catalog indirect: db2 catalog database on /db2sys[dir_name] catalog remote:    db2 catal ...

  9. phpExcel在封装

    <?php /** * 数组生成Excel * @author zouhao zouhao619@gmail.com * 使用示例 * $excel =new Excel(); $data=ar ...

  10. k8s 集群基本概念

    一.概述: kubernetes是google开源的容器集群管理系统,提供应用部署.维护.扩展机制等功能,利用kubernetes能方便管理跨集群运行容器化的应用,简称:k8s(k与s之间有8个字母) ...