WebView cache can be divided into page cache and data cache.


Page cache refers to the HTML, JS, CSS and other pages or resource data when loading a web page. These cache resources are generated by the behavior of the browser, and developers can only indirectly affect the cache data by configuring HTTP response headers to affect the behavior of the browser.

Their indexes are stored under /data/data/package_name/databases. Their files stored in/data/data/package_name/cache/xxxwebviewcachexxx. The folder names are different on 2.x and 4.x, but both folder names contain webViewCache.





There are two types of data caches: AppCache and DOM Storage (Web Storage). They result from the direct actions of the page developer. All cached data is in the developer’s direct and complete control.


AppCache allows us to selectively cache everything in a Web browser, from pages and images to scripts, CSS, and more. This is especially useful when it comes to CSS and JavaScript files that are applied to multiple pages of your site. Its size is currently typically 5M.


On Android, you need to manually enable (setAppCacheEnabled) and set the path (setAppCachePath) and capacity (setAppCacheMaxSize).


Android Webkit uses a db file to store AppCache data (my_path/ApplicationCache.db).

DOM Storage is a perfect solution for storing data that can be easily handled with key/value pairs. There are two types of Storage: Session Storage and Local Storage. They are used for session-level Storage (the page disappears after closing) and localized Storage (data will never expire unless it is deleted actively). DOM Storage (setDomStorageEnabled) can be manually enabled on Android. Set the storage path (setDatabasePath). On Android, Webkit will be DOM Storage have two files (my_path/localstorage/http_h5.m.taobao.com _0 localstorage and my_path/localstorage/Databases. The db)

In addition, in Android, if you need to delete the Local Storage file, it is not enough to delete the Local Storage file, there is cache data in the memory. If the page is displayed again, the cached data in the Local Storage still exists. You need to kill the current process that the program is running and restart it.

———————————————————————————————————————— ———————————————————————————————————

HTML5’s offline application capability allows WebApps to work even when the network is disconnected, which is a very useful feature. HTML5 offline application function is also used in my work recently. Since IT is done on the Android platform, it is natural to choose Webview to parse web pages. But how to make Webivew support HTML5 offline application function, after trial and error and Internet search information, repeated experiments finally succeeded. First, you need to configure some webView properties. Assume that the activity already has a webView instance object named m_webView, and add the following code:

WebSettings webseting = m_webview.getSettings(); webseting.setDomStorageEnabled(true); webseting.setAppCacheMaxSize(1024*1024*8); / / set the buffer size, I set is 8 m String appCacheDir = this. GetApplicationContext () getDir (" cache ", the Context. MODE_PRIVATE). GetPath (); webseting.setAppCachePath(appCacheDir); webseting.setAllowFileAccess(true); webseting.setAppCacheEnabled(true); webseting.setCacheMode(WebSettings.LOAD_DEFAULT);Copy the code

A WebView can set up a WebChromeClient object that responds to the extended buffer in its onReachedMaxAppCacheSize function. The code is as follows:


m_webview.setWebChromeClient(m_chromeClient); Private WebChromeClient m_chromeClient = new WebChromeClient(){// Expand the size of the cache @override public void onReachedMaxAppCacheSize(long spaceNeeded, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) { quotaUpdater.updateQuota(spaceNeeded * 2); }};Copy the code

 


The next thing I need to do is change the HTTP server configuration to support text/cache-manifest. I use apache server, Windows version, find mime.types file in apache conf folder. After opening the file, add text/cache-manifest MF manifest to the end of the file and restart the server. This step is very important, I failed several times because this was not configured on the server side, and finally found a clue in the reply at Appendix link 1.


After the above Settings, Webview can support HTML5 offline applications.





Appendix Link 1 says that the buffer directory should be getApplicationContext().getcacheDir ().getabsolutePath (); However, I found that setting the directory did not work after testing, maybe it is the Android version, mine is Android4.0.3, while his may be the previous Android version.





The buffer directory using getApplicationContext().getdir (“cache”, context.mode_private).getPath() is a clue found in appendix link 2. The appendix links: 1. alex.tapmania.org/2010/11/htm… 2. johncookie.iteye.com/blog/118245… 3.HTML5 Offline Official documentation: www.w3.org/TR/html5/of…

Reason: WebView loads the web page of the server. In order to reduce the access pressure, html5 cache technology is used to build a database locally. The page can be displayed in the mobile phone browser, but it can not be replaced by 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(); / / open javascript Settings Settings. SetJavaScriptEnabled (true); / / set can use localStorage Settings. SetDomStorageEnabled (true); / / application can have database Settings. SetDatabaseEnabled (true); String dbPath =this.getApplicationContest().getDir("database", Context.MODE_PRIVATE).getPath(); settings.setDatabasePath(dbPath); / / application can cache 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 "); }}Copy the code

HTML5 Page Source code:


  
      
  
  
   
  
   
   
  
  
    
       
here is test info:
Copy the code