manifest 离线缓存实践

资讯类App，每次打开一个详情页，客户端总得新建一个webview实例。使用hybird模式开发，且没有使用本地模板，经实践发现客户端通过启用缓存可实现网页的默认缓存，但是模板页本身仍然需要重新请求，为提高静态资源加载速度且节约资源，又能不重写业务代码（改用本地模板形式），估尝试使用manifest离线缓存方式，manifest主要是用来实现离线应用的。最大的特点是它会将.html页面本身也给缓存下来，适用于静态数据的网页或者游戏。

遇到个比较坑爹的问题，安卓开启缓存功能会导致页面打开有比较高概率的白屏问题，且前端和客户端均无法判断白屏的出现。

启用离线缓存

1. 新建清单文件,引用清单文件
   务必让Web服务器将.appcache的MIME类型描述为text/cache-manifest

/*demo.appcache*/
CACHE MANIFEST
index.html
image.jpg

/*index.html*/

2. 定义缓存区域

CACHE MANIFEST
//默认缓存区

CACHE:
//缓存区

3. 定义备用区域

FALLBACK
//指定浏览器应当如何处理没有包括在清单内的资源

4. 定义网络区域

NETWORK:
//定义一组不该被缓存的资源

5. 检查浏览器状态,是否一定不是离线
   window.navigator.onLine: false | true（可能在线）
6. 使用离线缓存
   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]);
}

更新缓存

为了主动更新缓存，有两种方式可用。

1. 修改.appcache文件，并且reload页面。
   window.location.reload();
2. 修改.appcache文件，手动触发更新缓存。

 window.applicationCache.onupdateready = function(){
    window.applicationCache.swapCache();
    checkStatus();
 }
 window.applicationCache.update();

兼容

考虑部分浏览器不支持此功能，简单做下判断
if(!window.applicationcache){ console.log('不支持manifest离线缓存'); }