h5的应用程序缓存,为应用带来了三大优势:1,可以让用户离线浏览;2,提高加载速度;3,减少服务器负载。这么好的东西,IE对它的支持自然不是很友好,要IE10+才支持。IE9以下对离线缓存的不兼容虽然让人有些遗憾,但这并不妨碍appcache的魅力。下面,让我们看看如何实现离线缓存。直接上代码:
html5代码:
<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache"> <!--manifest属性不可少,指定了该属性的页面在用户访问时都会被缓存。manifest.appcache的文件名和扩展名都是任意的,但是必须在服务器上设置文件的mine-type为text/cache-manifest。
<head>
<meta charset="UTF-8">
<title>learn Application Cache</title>
</head>
<body>
<img src="test.jpg"/>
<script src="test.js"></script>
</body>
</html>
manifest.appcache文件内的代码:
CACHE MANIFEST 此处必不可少
#VERSION 1.0 2018-01-01 此处为注释内容,通过更新注释可以提醒浏览器更新缓存
CACHE: 标示要缓存的文件,可以使相对路径也可以是绝对路径
test.js
test.jpg
NETWORK: 绕过缓存直接读取的文件,通常为*,表示除了CACHE中的文件都要通过联网访问
*
FALLBACK: 可选,资源无法访问时的替代页面
/html5/ /404.html 无法建立因特网连接,则用404.html替代/html5/中所有文件
*.html /404.html 任何页面无法访问时跳转到404.html
个人笔记,如有错误之处,望指正。