Android WebView Caching cache + HTML5 offline function resolution

Source: Internet
Author: User

Time -- .- One  +: .: -CSDN Blog Original http://blog.csdn.net/moubenmao/article/details/9076917Themes Android HTML5 webview cache can be divided into page cache and data cache. Page caching refers to HTML, JS, CSS, and other pages or resource data when a page is loaded.         These cache resources are generated by the browser's behavior, and developers can only influence the cached data indirectly by configuring the HTTP response header to affect the browser's behavior. Their index is stored in theUnder the/data/data/package_name/databases. Their files are stored in/data/data/package_name/cache/.under the xxxwebviewcachexxx.            The name of the folder differs between 2.x and 4.x, but all folder names contain Webviewcache. The data cache is divided into two types: AppCache and Dom Storage (Web Storage). They are generated by the direct behavior of the page developer. All cached data is directly and completely controlled by the developer. AppCache allows us to have a choice of buffering all things in a Web browser, from pages, images to scripts, CSS, and so on. This is especially useful when it comes to CSS and JavaScript files that are applied to multiple pages on a Web site.             Its size is now usually 5M. Manually on Android (setappcacheenabled) and set the path (Setappcachepath) and Capacity (Setappcachemaxsize) Android WebKit uses a DB file to hold AppCache data (My_path/applicationcache.db) If you need to store some simple key/The DOM storage is a perfect solution for the data that can be solved by value. Depending on the scope of the action, there are session storage and local storage two, respectively, for conversation-level storage (page close is gone) and localized storage (unless actively deleted, the data will never expire). In Android you can manually turn on Dom Storage (setdomstorageenabled), set the storage path (SetDatabasePath) in Android WebKit will generate two files for Dom Storage (my_ Path/localstorage/http_h5.m.taobao.com_0.localstorage and my_path/localstorage/databases.db) In addition, when clearing the cache in Android, if you need to clear the local storage, it is not enough to simply delete locally storage storage files, there is cache data in the memory. If you enter the page again, the cached data in the Local storage also exists.            You need to kill the current process that the program is running and then restart it. --------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------- ---HTML5 's off-line application allows WebApp to work even when the network is disconnected, which is a very useful feature. Recently work also uses the HTML5 offline application function, because is on the Android platform to do, so naturally chooses WebView to parse the webpage. But how to make webivew support HTML5 off-line application function, after repeated groping and surfing the internet to find information, repeated experiments have finally succeeded.  You first need to configure some of the properties of WebView, assuming that the activity already has an WebView instance object named M_webview, then add the following code: [HTML] View plain copywebsettings webseting =M_webview. GetSettings (); Webseting.setdomstorageenabled (true); Webseting.setappcachemaxsize (1024x768*1024x768*8);//set the buffer size, I set the 8MString Appcachedir = This. Getapplicationcontext (). Getdir ("Cache", Context.mode_private). GetPath ();          Webseting.setappcachepath (Appcachedir); Webseting.setallowfileaccess (true); Webseting.setappcacheenabled (true);   Webseting.setcachemode (Websettings.load_default); WebView can set a Webchromeclient object that responds to the extended buffer in its onreachedmaxappcachesize function.      The code is as follows: [HTML] View plain copym_webview.setwebchromeclient (m_chromeclient); PrivateWebchromeclient m_chromeclient =Newwebchromeclient () {//capacity of the extended cache@Override Public voidOnreachedmaxappcachesize (Longspaceneeded,LongTotalusedquota, Webstorage.quotaupdater quotaupdater) {Quotaupdater.updatequota (spaceneeded*2);    }             }; Second, modify the configuration in the HTTP server so that it supports the text/cache-manifest, I am using the Apache server, is the version of Windows, in the Apache Conf folder found Mime.types files, opened after the end of the file plus "text/cache-The manifest can support the offline application of HTML5 through the above setup webview. Appendix 1 says that the buffer directory should be Getapplicationcontext (). Getcachedir (). GetAbsolutePath (); But I've been experimenting and found that setting that directory doesn't work, maybe it's different from Android, Mine is Android4.0.3, and he's probably a previous Android version of it. The buffer directory uses Getapplicationcontext (). Getdir ("Cache", Context.mode_private). GetPath () is a clue found in Link 2 in the Appendix. Appendix Links:1. http://alex.tapmania.org/2010/11/html5-cache-android-webview.html            2. http://johncookie.iteye.com/blog/1182459            3. HTML5 Offline Official document: http://www.w3.org/TR/html5/offline.html#manifestscause: WebView Load Server Web page, in order to reduce the access pressure, with the HTML5 cache technology, the local database built, in the mobile browser can display the page, replaced by WebView. Solution Example: Activity code:?code snippet, double-click Copy on Public classEfan_newsreader extends Activity {/** Called when the activity is first created.*/@Override Public voidonCreate (Bundle savedinstancestate) {super. OnCreate (Savedinstancestate);                            Setcontentview (R.layout.main); WebView Mywebview=(WebView) Findviewbyid (R.id.my_webview); Mywebview.setwebviewclient (Newwebviewclient ()); WebSettings Settings=mywebview.getsettings (); //turn on JavaScript settingsSettings.setjavascriptenabled (true ); //settings can be used LocalstorageSettings.setdomstorageenabled (true ); //applications can have databasesSettings.setdatabaseenabled (true ); String DbPath= This. Getapplicationcontest (). Getdir ("Database", Context.mode_private). GetPath ();                Settings.setdatabasepath (DbPath); //apps can have cacheSettings.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:?code snippet, double-click Copy< HTML manifest ="mymanifest.manifest"> < head >< meta HTTP-EQUIV ="Content-type"Content ="text/html; content="No-cache"charset = Utf-8"/>< Script type ="Text/javascript"src ="Js/jquery-1.6.1.min.js"></script > < script >$ (document). Ready (function () {databasetest ();}); function Databasetest () {//Open Database      vardb = OpenDatabase ('MyDB','1.0','Test DB',2*1024x768*1024x768); Db.transaction (Function (TX) {Tx.executesql ('CREATE TABLE IF not EXISTS testhtml (id unique, contenttext)'); Tx.executesql ('INSERT INTO testhtml (contenttext) VALUES ("Insert Data test!")');         }); Db.transaction (Function (TX) {Tx.executesql ('SELECT * from testhtml', [],function (Tx,result) {varlen=result.rows.length; varmsg ="< p >found rows:"+ len +"</p >"; $("#testinfo"). Append (msg); },NULL);     }); } </script >  isTest info:</div > < div id ="TestInfo"></Div ></Body >Other settings are: Settings.setcachemode (Websettings.load_default); //cache is used by defaultSettings.setappcachemaxsize (8*1024x768*1024x768);//cache can have up to 8 mSettings.setallowfileaccess (true);//can read file cache (manifest effective)inchwebchromeclient:?code snippet, double-click CopyTenMywebview.setwebchromeclient (Newwebchromeclient () {@Override Public voidonexceededdatabasequota (string url, string databaseidentifier,LongCurrentquota,LongEstimatedSize,LongTotalusedquota, Webstorage.quotaupdater quotaupdater) {Quotaupdater.updatequota (estimatedsize*2 ); }}or:?code snippet, double-click CopyTenMywebview.setwebchromeclient (Newwebchromeclient () {//capacity of the extended cache@Override Public voidOnreachedmaxappcachesize (LongSpaceneeded,LongTotalusedquota, Webstorage.quotaupdater quotaupdater) {Quotaupdater.updatequota (spaceneeded*2 ); }} According to the example, I successfully solved my problem, and before the popup box appeared to find the data (hint: underfine) also solved, this should be the original database was not set up. 

Android WebView Caching cache + HTML5 offline function resolution

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.