e-works数字化企业网  »  文章频道  »  基础信息化  »  移动应用

H5和移动端 WebView 缓存机制解析与实战

2017/7/2    来源:腾讯Bugly    作者:叶建升      
关键字:H5    WebView  
本文从实际web应用项目中缓存相关问题出发,较为全面地分析了html5缓存机制的原理与应用以及移动端应用webView对html5缓存机制的支持方式,以供web开发的同学们参考。

    例如以下manifest文件:
 
H5 和移动端 WebView 缓存机制解析与实战
 
    那么,如果使用了应用缓存,应该如何去更新呢?有以下两种方式
 
    1、自动更新
 
    浏览器除了在第一次访问 Web 应用时缓存资源外,只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。
 
    2、手动更新
 
    开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值,如果是 UPDATEREADY,那么可以调用 window.applicationCache.update() 更新缓存。示范代码如下。
 
    手动更新缓存代码:
 
    然而,有时候虽然应用缓存刷新了,但是还是不能看到最新的:那么有可能是使用了本地存储。常用的本地存储有DOM Storage和webSQL和indexDB三种,细节可以搜索这篇文章 《HTML5 Storage Wars - localStorage vs. IndexedDB vs. Web SQL》,这里就不展开了,需要注意的是,若使用本地存储,想要清理缓存,除了清理本地存储文件外,还需要重启APP,以消除内存中的备份。
 
    至此,一个完成的流程图就出来了:
 
H5 和移动端 WebView 缓存机制解析与实战
 
    三、移动端APP如何支持html5缓存机制?
 
    笔者现在常会和移动端APP内嵌html5页面打交道,那么移动端hybrid方式开发的APP,如何支持以上的缓存方式呢?
 
    需要了解这些,我们先了解下hybrid方式开发的APP怎么展示网页。简单得说就是使用了webView,那么什么是webView呢?WebView是手机中内置了一款高性能webkit 内核浏览器,在SDK 中封装的一个组件。 没有提供地址栏和导航栏,WebView只是单纯的展示一个网页界面。简单地可以理解为简略版的浏览器。
 
    安卓端:
 
    1、网页缓存:
 
    在data/应用package下生成database与cache两个文件夹,请求的Url记录是保存在webviewCache.db里,而url的内容是保存在webviewCache文件夹下。
 
    <1> 缓存构成
 
H5 和移动端 WebView 缓存机制解析与实战
 
    <2> 缓存模式
 
    LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据,
 
    LOAD_DEFAULT:根据cache-control决定是否从网络上取数据,
 
    LOAD_CACHE_NORMAL:API level 17中已经废弃, 从API level 11开始作用同- - LOAD_DEFAULT模式,
 
    LOAD_NO_CACHE: 不使用缓存,只从网络获取数据,
 
    LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。
 
    如果一个页面的cache-control为no-cache,在模式LOAD_DEFAULT下,无论如何都会从网络上取数据,如果没有网络,就会出现错误页面;在LOAD_CACHE_ELSE_NETWORK模式下,无论是否有网络,只要本地有缓存,都使用缓存。本地没有缓存时才从网络上获取。如果一个页面的cache-control为max-age=60,在两种模式下都使用本地缓存数据。
 
    2、应用缓存
 
    根据setAppCachePath(String appCachePath)提供的路径,在H5使用缓存过程中生成的缓存文件。
 
    无模式选择,通过setAppCacheEnabled(boolean flag)设置是否打开。默认关闭,即,H5的缓存无法使用。如果要手动清理缓存,需要找到调用setAppCachePath(String appCachePath)设置缓存的路径,把它下面的文件全部删除就OK了。
 
    iOS端:
 
    iOS的UIWebView组件不支持html5应用程序缓存的方式,对于协议缓存,可以使用sdk中的NSURLCache类。NSURLRequest需要一个缓存参数来说明它请求的url何如缓存数据的,我们先看下它的CachePolicy类型。
 
    1.NSURLRequestUseProtocolCachePolicy NSURLRequest 默认的cache policy,使用Protocol协议定义,注意这种情况下默认缓存时间是60s
 
    2.NSURLRequestReloadIgnoringCacheData 忽略缓存直接从原始地址下载。
 
    3.NSURLRequestReturnCacheDataElseLoad 只有在cache中不存在data时才从原始地址下载。
 
    4.NSURLRequestReturnCacheDataDontLoad 只使用cache数据,如果不存在cache,请求失败;用于没有建立网络连接离线模式;
 
    5.NSURLRequestReloadIgnoringLocalAndRemoteCacheData:忽略本地和远程的缓存数据,直接从原始地址下载,与NSURLRequestReloadIgnoringCacheData类似。
 
    6.NSURLRequestReloadRevalidatingCacheData:验证本地数据与远程数据是否相同,如果不同则下载远程数据,否则使用本地数据。
 
    处于数据安全性的考虑,iOS的应用拥有自己独立的目录,用来写入应用的数据或者首选项参数。应用安装后,会有对应的home目录,基于NSURLCache来实现数据的Cache,NSURLCache会存放在home内的子目录Library/ Caches下,以Bundle Identifier为文件夹名建立Cache的存放路径。在xcode下可以管理对应的文件,具体可以搜索阅读此文:《关于 iOS 删除缓存的那些事儿》
 
H5 和移动端 WebView 缓存机制解析与实战
    四、总结
 
    综上所述,html5缓存主要可以分为http协议缓存、应用缓存、DOM Storage、webSQL和indexedDB几种方式,针对不同的方式清理缓存的方式也不尽相同,上文中都有说明。同时,在移动端webView层,对html缓存机制做了支持(从笔者接触过的手游和相关APP来看,目前使用默认缓存机制的比较多),项目开发过程中缓存更新和清理方式也需要有针对性地选择使用。
 
责任编辑:李欢
本文为授权转载文章,任何人未经原授权方同意,不得复制、转载、摘编等任何方式进行使用,e-works不承担由此而产生的任何法律责任! 如有异议请及时告之,以便进行及时处理。联系方式:editor@e-works.net.cn tel:027-87592219/20/21。
兴趣阅读
H5    WebView  
相关资料
e-works
官方微信
掌上
信息化
编辑推荐
新闻推荐
博客推荐
视频推荐