012.WebView中缓存H5文件

2016-12-19 本文已影响272人春江潮

在混合式开发中，为了节省用户流量，少不了要对相关的资源和数据进行缓存，本文主要研究的就是对H5页面缓存。

WebView的缓存

可以分为页面缓存和数据缓存。

页面缓存：是指加载一个网页时的html、JS、CSS等页面或者资源数据。这些缓存资源是由于浏览器的行为而产生，开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据
页面缓存可参考如下链接：
页面的缓存与不缓存设置
数据缓存：分为AppCache和DOM Storage（Web Storage）两种。他们是因为页面开发者的直接行为而产生。所有的缓存数据都由开发者直接完全地掌控。

AppCache

AppCache使我们能够有选择的缓冲web浏览器中所有的东西，从页面、图片到脚本、css等等。尤其在涉及到应用于网站的多个页面上的CSS和JavaScript文件的时候非常有用。以前版本大小是5M，可以通过WebSetting.setAppCacheMaxSize进行调整，但是这个方法在API18中已经过期。当前AppCache大小为自动调整的.This method was deprecated in API level 18. In future quota will be managed automatically.。

使用AppCache需要如下步骤：

setAppCacheEnabled
setAppCachePath

DOM Storage

如果存储简单的Key/Value格式的数据，DOM Storage是个不错的选择。根据作用范围分为Session Storage和Local Storage两种，分别用于回话级别的存储（类似于默认的Session，关闭网页就挂了）和本地化存储（类似于没有设置过期时间的Cookie，除非主动操作删除，否则永远不会过期）。

使用DOM Storage需要如下步骤：

setDomStorageEnabled
setDatabasePath（存储路径，API 19过期，调用该方法不在有效果）

缓存模式

LOAD_CACHE_ELSE_NETWORK
只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。如：www.taobao.com的cache-control为no-cache，在模式LOAD_DEFAULT下，无论如何都会从网络上取数据，如果没有网络，就会出现错误页面；在LOAD_CACHE_ELSE_NETWORK模式下，无论是否有网络，只要本地有缓存，都使用缓存。本地没有缓存时才从网络上获取
LOAD_CACHE_ONLY
不使用网络，只读取本地缓存数据
LOAD_DEFAULT
默认加载模式。根据cache-control决定是否从网络上取数据。
LOAD_NORMAL
中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式

LOAD_NO_CACHE
不使用缓存，只从网络获取数据.

对于这不同的应用，选择模式的方式也不同，比如当前用户处在WIFI情况下，我会选择LOAD_DEFAULT；如果我的页面很大，而且不怎么更新，这个时候我就会选择LOAD_CACHE_ELSE_NETWORK；如果整个系统页面类似于股票行情那样时刻更新的，可能会选择LOAD_NO_CACHE

删除缓存数据

deleteDatabase(“WebView.db”)
webView.clearHistory();
webView.clearFormData();
getCacheDir().delete();

Note:CacheDir目录下面可能存在文件夹和其它文件，导致删除失败，此时可以写循环逻辑删除文件。示例如下：

/**
 * 删除data/data/packagename/下的所有文件，执行该方法需谨慎，得先查看需要删除什么文件，保留必要文件，如果把其它必要的文件也删除了，那就不太好了
 */
private void deleteAllData(){
    String filesStr =  getApplicationContext().getFilesDir().getAbsolutePath();
    File rootFile = new File(filesStr.substring(0,filesStr.lastIndexOf('/')));
    //如果是目录
    if (rootFile.isDirectory()){
        for(File file :rootFile.listFiles()){
            deleteFile(file);
        }
    }
}
public void deleteFile(File rootFile){
    Log.i(TAG,"**************************"+rootFile.getAbsolutePath());
    if (rootFile.isDirectory()){
        for (File file:rootFile.listFiles()){
            deleteFile(file);
        }
    }
    rootFile.delete();

}

注意：AppCache需要前端的支持，需要在在html标签中添加manifest属性，例如Apache服务器中：<html manifest="xxx.appcache">

关于H5缓存文件可以参考如下链接：
HTML5应用程序缓存Application Cache
html5 中创建manifest缓存以及更新方法
关于WebView缓存的ApplicationCache.db文件中，文件在表中的内容，可参考下文末(默认配置下，我的目录和他的不太一样)：
关于android_webview,html5_appcache