h5 离线缓存
2018-02-01 本文已影响0人
webjiacheng
由于在生活中，经常会遇到有些时候手机没有信号没有网络什么的，就访问不了应用了，但是我们应用有很多东西又是不怎么变化的，所以这两天看了下有关离线缓存方面的文章，自己简单实现了下：
网上都是tomcat的方式的，我使用的是nodejs的方式。
1.创建index.html
<!DOCTYPE html>
<html lang="en" manifest="/cache/demo.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试缓存</title>
</head>
<body>
<h2>文件缓存测试12345</h2>
<a href="./a.html">去新页面</a>
<img src="/public/1.png" alt="">
<img src="/public/2.png" alt="">
</body>
<script>
applicationCache.onupdateready = function() {
if (confirm("本地缓存已被更新,需要刷新页面来获取应用程序最新版本")) {
//手动更新本地缓存，只能在onupdateready事件触发时调用
applicationCache.swapCache();
location.reload();
}
}
</script>
</html>
其中看到第一行<html lang="en" manifest="/cache/demo.appcache">,manifest的属性值是缓存的菜单文件，看看里面写的是什么：
CACHE MANIFEST
# v1.0.7
CACHE:
/public/index.html
/public/a.html
/public/1.png
NETWORK:
/public/2.png
CACHE MANIFEST是必选的，CACHE是需要缓存的资源（可选），NETWORK是需要网络加载的资源（可选），因为浏览器解析到index.html的第一行时，会去读这份缓存清单，先看该清单与没有改变，没有改变则使用缓存中的文件，否则更新缓存刷新页面，流程是这样的：
缓存流程
然后还有最重要的一步是：demo.appcache的返回首部字段
mime必须是text/cache-manifest,如果你用PC端访问的的话，记得不要勾选disable cache选项
不要勾选disable cache选项
你会发现，在你的缓存中会有这些东西：
image.png
你此时把服务给关掉或者网络断掉就会发现还依然可以访问网页，但是b.png无法访问，因为他没有被缓存下来。
下面是浏览器对h5离线缓存的支持情况
h5离线缓存支持情况
