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