h5离线缓存

h5离线缓存可以让Web应用在离线的情况下继续使用,通过manifest文件指明需要缓存资源

检测是否在线

navigator.onLine

//添加事件监听,在线状态发生变化时,触发相应动作

window.addEventListener("online",function(e){

  log("Online");

},true);

实例 - 完整的 Manifest 文件(可以在一份manifest文件中多次使用CACHE、NETWORK、和FALLBACK头)

CACHE MANIFEST
#要缓存的文件 # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js #不缓存的文件 NETWORK: login.asp #获取不到缓存资源时的备选资源路径 FALLBACK: /html5/ /404.html

注:NETWORK具体指明了那些资源始终从网上获取。与仅从mainfest中删除文件不同的是,未在menifest文件中明确列出的主条目也会被缓存。无论应用程序缓存区是否缓存了资源,为了确保应用程序从服务器请求文件,应将文件列在NETWORK:部分。

格式
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

h5离线缓存缺陷
1、含有manifest属性的当前请求页无论如何都会被缓存
2、更新需要建立在manifest文件的更新,文件更新后是需要页面再次刷新的(需要2次刷新才能获取新资源)
3、更新是全局性的,无法单独更新某个文件(无法单点更新)
4、对于链接的参数变化是敏感的,任何一个参数的修改都会被(master)重新缓存(重复缓存含参页面)index.html和index.html?renew=1都会被认为是不同文件,分别缓存
 试用场景

1、单地址的页面
2、对实时性要求不高的业务
3、离线webapp

HTML5离线应用检测浏览器支持情况
if(window.applicationCache){
}

你可能感兴趣的:(h5离线缓存)