Android webView 缓存 Cache + HTML5 离线功能

8,861 阅读4分钟
原文链接: blog.csdn.net
            WebView的缓存可以分为页面缓存和数据缓存。

           页面缓存是指加载一个网页时的html、JS、CSS等页面或者资源数据。这些缓存资源是由于浏览器的行为而产生,开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据。

         他们的索引存放在/data/data/package_name/databases下。他们的文件存放在/data/data/package_name/cache/xxxwebviewcachexxx下。文件夹的名字在2.x和4.x上有所不同,但都文件夹名字中都包含webviewcache。



            数据缓存分为两种:AppCache和DOM Storage(Web Storage)。他们是因为页面开发者的直接行为而产生。所有的缓存数据都由开发者直接完全地掌控。
AppCache使我们能够有选择的缓冲web浏览器中所有的东西,从页面、图片到脚本、css等等。尤其在涉及到应用于网站的多个页面上的CSS和JavaScript文件的时候非常有用。其大小目前通常是5M。
            在Android上需要手动开启(setAppCacheEnabled),并设置路径(setAppCachePath)和容量(setAppCacheMaxSize)

Android中Webkit使用一个db文件来保存AppCache数据(my_path/ApplicationCache.db)

          如果需要存储一些简单的用key/value对即可解决的数据,DOM Storage是非常完美的方案。根据作用范围的不同,有Session Storage和Local Storage两种,分别用于会话级别的存储(页面关闭即消失)和本地化存储(除非主动删除,否则数据永远不会过期)。
在Android中可以手动开启DOM Storage(setDomStorageEnabled),设置存储路径(setDatabasePath)
Android中Webkit会为DOM Storage产生两个文件(my_path/localstorage/http_h5.m.taobao.com_0.localstorage和my_path/localstorage/Databases.db)

           另外,在Android中清除缓存时,如果需要清除Local Storage的话,仅仅删除Local Storage的本地存储文件是不够的,内存里面有缓存数据。如果再次进入页面,Local Storage中的缓存数据同样存在。需要杀死程序运行的当前进程再重新启动才可以。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用,这是个非常有用的功能。近来工作中也要用到HTML5离线应用功能,由于是在Android平台上做,所以自然而然的选择Webview来解析网页。但如何使Webivew支持HTML5离线应用功能呢,经过反复摸索和上网查找资料,反复做试验终于成功了。

首先需配置webview的的一些属性,假设activity中已经有了一个Webview的实例对象,名为m_webview,然后增加以下代码:

WebSettings webseting = m_webview.getSettings();  
    webseting.setDomStorageEnabled(true);             
        webseting.setAppCacheMaxSize(1024*1024*8);//设置缓冲大小,我设的是8M  
    String appCacheDir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();      
        webseting.setAppCachePath(appCacheDir);  
        webseting.setAllowFileAccess(true);  
        webseting.setAppCacheEnabled(true);  
        webseting.setCacheMode(WebSettings.LOAD_DEFAULT);   
webview可以设置一个WebChromeClient对象,在其onReachedMaxAppCacheSize函数对扩充缓冲做出响应。代码如下:
m_webview.setWebChromeClient(m_chromeClient);  
    private WebChromeClient m_chromeClient = new WebChromeClient(){  
        //扩充缓存的容量    
    @Override  
    public void onReachedMaxAppCacheSize(long spaceNeeded,    
                long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {    
            quotaUpdater.updateQuota(spaceNeeded * 2);    
        }         
    }; 
 

其次要修改http服务器中的配置,使其支持text/cache-manifest,我使用的是apache服务器,是windows版本的,在apache的conf文件夹中找到mime.types文件,打开后在文件的最后加上
“text/cache-manifest              mf  manifest”,重启服务器即可。这一步很重要,我就是因为服务器端没有配置这个,所以失败了好多次,最后是在附录链接1的回复中找到的线索。


经过以上设置Webview就可以支持HTML5的离线应用了。

附录链接1中说缓冲目录应该是getApplicationContext().getCacheDir().getAbsolutePath();但我经过试验后发现设置那个目录不起作用,可能是Android版本不同吧,我的是Android4.0.3,而他的可能是以前的Android版本吧。

缓冲目录使用getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath()是从附录链接2中找到的线索。

附录链接:
1.alex.tapmania.org/2010/11/htm…
2.johncookie.iteye.com/blog/118245…
3.HTML5 Offline官方文档:www.w3.org/TR/html5/of…

原因:
webview加载 服务端的网页,为了减少访问压力,用html5缓存技术,本地建了数据库,在手机浏览器里  可以显示页面,换成webView就不行了。


解决范例:
Activity code:

public class efan_NewsReader extendsActivity {  
        /** Called when the activity is first created. */  
        @Override  
        publicvoidonCreate(Bundle savedInstanceState)  
        {     
                super.onCreate(savedInstanceState);     
                setContentView(R.layout.main);              
                WebView myWebView=(WebView)findViewById(R.id.my_webview);     
                myWebView.setWebViewClient(newWebViewClient());     
                WebSettings settings = myWebView.getSettings();  
               // 开启javascript设置  
               settings.setJavaScriptEnabled(true);    
               // 设置可以使用localStorage  
               settings.setDomStorageEnabled(true);  
               // 应用可以有数据库  
               settings.setDatabaseEnabled(true);     
               String dbPath =this.getApplicationContest().getDir("database", Context.MODE_PRIVATE).getPath();  
               settings.setDatabasePath(dbPath);  
               // 应用可以有缓存  
               settings.setAppCacheEnabled(true);              
               String appCaceDir =this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();  
               settings.setAppCachePath(appCaceDir);  
                  
               myWebView.loadUrl("http://10.10.35.47:8080/html5test/test.htm");  
        }  
} 
HTML5 page source code:
  
      
  
  
   
  
   
   
  
  
    
here is test info: