manifest 离线缓存实践
2018-04-04 本文已影响0人
墩儿
资讯类App，每次打开一个详情页，客户端总得新建一个webview实例。使用hybird模式开发，且没有使用本地模板，经实践发现客户端通过启用缓存可实现网页的默认缓存，但是模板页本身仍然需要重新请求，为提高静态资源加载速度且节约资源，又能不重写业务代码（改用本地模板形式），估尝试使用manifest离线缓存方式，manifest主要是用来实现离线应用的。最大的特点是它会将.html页面本身也给缓存下来，适用于静态数据的网页或者游戏。
遇到个比较坑爹的问题，安卓开启缓存功能会导致页面打开有比较高概率的白屏问题，且前端和客户端均无法判断白屏的出现。
启用离线缓存
- 新建清单文件,引用清单文件
务必让Web服务器将.appcache的MIME类型描述为text/cache-manifest
/*demo.appcache*/
CACHE MANIFEST
index.html
image.jpg
/*index.html*/
<html manifest="demo.appcache">
- 定义缓存区域
CACHE MANIFEST
//默认缓存区
CACHE:
//缓存区
- 定义备用区域
FALLBACK
//指定浏览器应当如何处理没有包括在清单内的资源
- 定义网络区域
NETWORK:
//定义一组不该被缓存的资源
- 检查浏览器状态,是否一定不是离线
window.navigator.onLine: false | true（可能在线） - 使用离线缓存
window.applicationCache //返回一个applicationCache对象
· 方法
update() 更新清单内的缓存
swapCache() 替换为最新缓存
· 属性
status 返回缓存的状态
| 值 | 名称 | 说明 |
|---|---|---|
| 0 | UNCACHE | 无缓存，或缓存数据未下载 |
| 1 | IDLE | 缓存未执行任何操作 |
| 2 | CHECKING | 检查缓存清单 |
| 3 | DOWNLOADING | 下载缓存清单中的内容 |
| 4 | UPDATEREADY | 有更新后的缓存数据可用 |
| 5 | OBSOLETE | 缓存数据已废弃 |
· 事件
checking 正在检查更新
noupdate 没有更新可用
downloading 正在下载缓存
progress 在下载阶段触发
cached 已下载缓存
updateready 新资源已下载，可用
obsolete 缓存已废弃
检查缓存状态
//检查缓存状态
function checkStatus(){
var statusNames = ['UNCACHE:无缓存', 'IDLE:缓存无变化', 'CHECKING:检查中', 'DOWNLOADING:下载中', 'UPDATEREADY:有新缓存数据可用', 'OBSOLETE:缓存已废弃'];
var status = window.applicationCache.status;
console.log("缓存状态: %s", statusNames[status]);
}
更新缓存
为了主动更新缓存，有两种方式可用。
- 修改.appcache文件，并且reload页面。
window.location.reload(); - 修改.appcache文件，手动触发更新缓存。
window.applicationCache.onupdateready = function(){
window.applicationCache.swapCache();
checkStatus();
}
window.applicationCache.update();
兼容
考虑部分浏览器不支持此功能，简单做下判断
if(!window.applicationcache){ console.log('不支持manifest离线缓存'); }
