html5——应用缓存

基本概念

1、HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件

2、可配置需要缓存的资源，网络无连接应用仍可用，本地读取缓存资源，提升访问速度，增强用户体验，减少请求，缓解服务器负担

3、使用上只需要一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名

4、根元素(html)添加属性manifest="demo.appcache"

manifest文件

1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST

2、可以指定多个CACHE、NETWORK、FALLBACK，无顺序限制

3、CACHE需要缓存那些资源

4、NETWORK不需要缓存那些资源，必须在网络下面才能访问

5、FALLBACK当访问不到某个资源时，自动由另外一个资源替换

manifest文件格式

1、顶行写CACHE MANIFEST

2、CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js等

3、NETWORK: 换行指定需要在线访问的资源，可使用通配符

4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)

<!DOCTYPE html>
<html lang="en" manifest="01.appcache">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="http://img.diannao1.com/d/file/html/tv/hytv/2017-12-14/9ce8a2cb005069553d4379220ba17579.jpg" width="400px">
</body>
</html>

CACHE MANIFEST

# 注释以#开头
#下面是要缓存的文件
CACHE:
　　 js/jquery.min.js
    http://img.diannao1.com/d/file/html/tv/hytv/2017-12-14/9ce8a2cb005069553d4379220ba17579.jpg

#指定必须联网才能访问的文件
NETWORK:
    http://img.diannao1.com/d/file/html/tv/hytv/2017-12-14/9ce8a2cb005069553d4379220ba17579.jpg


#当前页面无法访问是回退的页面
FALLBACK:
    404.html