HTML5之缓存

----- 缓存文件

- 使用UTF-8编码
- 以Cache Manifest 开头
- 三个基本部分

CACHE MANIFEST
menu.html
menu.js
# login requires network
connection
NETWORK:
login.php
FALLBACK:
/ /menu.html
CACHE:
style/innbar.css

- NetWork：此类文件需要从网络访问
- FallBack：缓存找不到的时候显示它
- Cache：真正要缓存的内容

----- 离线状态

- window.applicationCache

取值 名称 含义
---------------------------------------------------------------------
0 UnCached 页面完全没有被缓存,可能是没被设定或者尚未被下载
1 IDLE 已经被下载并可以访问
2 CheCking 正在检查缓存是否需要更新
3 Downloading 发现新版本正在更新
4 UpDateReady 已经下载完成,下次离线访问就可用
5 ObSolete 缓存清单文件访问失败,此页面会被从缓存中清除

window.applicationCache.status // 获取状态

----- 离线事件

window.applicationCache.add EventListener("progress",
function(e) {
    alert("新文件下载");
}, false);

名称 描述
--------------------------------------------------
checking 检查在manifest里面的文件是否有更新
noupdate 没有找到新文件
donwloading 下载中
progress 任何文件被下载这一事件都会被唤起
cached 所有缓存都被下载完
updateready 由于manifest,所有文件被重新下载完毕
obsolete 由于manifest清空,文件找不到
error 各种错误,比如manifest文件格式错

------ 更新缓存方法

- JS中提供update()和swapCache()直接更新缓存

<button onclick="window.applicationCache.update();">更新缓存</button>

window.applicationCache.addEventListene r("updateready",
function(e) {window.applicationCache.swapCache();
    alert("New Cache  in action");
}, false);

- 可以使用SetInterval()定期唤醒更新

------ 检测是否在线

- window.navigator.onLine

window.addEventLis tener("online", function() {
    alert("你是在线的");
  }, false);
  window.addEventLis tener("offline",  function() 
  {
    alert("你是离线的");
  }, false);

- 不测路由,只测连接,所以可能联网当不能上网