基本概念
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