webview 设定和使用缓存来获取网页中的js，css和图片资源

今天在android中将sqlite的数据库文件生成在SD卡上的过程中，发现生成的.db文件的旁边

生成了一个大小为0的与数据库文件同名的.db-journal文件，不明白此文件的用途，于是

该文件是sqlite的一个临时的日志文件，主要用于sqlite事务回滚机制，在事务开始时产生，

在事务结束时删除；当程序发生崩溃或者系统断电时该文件将留在磁盘上，以便下次程序运行

但是我创建数据库时将事务结束了，同时程序也没有崩溃，为什么还是会在磁盘上产生

深入研究，发现这是sqlite生成日志文件的不同模式造成的，在android采用的这种模式下，

.db-journal文件是永久的留在磁盘上不会被自动清除的，如果没有发生事务回滚那么.db-journal

文件的大小为0，这样就避免了每次生成和删除.db-journal文件的开销。

=================================================================================

So last post was about HTML5 and WebViews but it didn’t cover offline usage and especially caching.
HTML5 is cool. It can work offline once cached by the browser. The main mechanism for offline HTML5 is the so called Manifest. Basically it’s a file which lists entries (js files, pictures, css, etc.) to be cached by the browser.

To enable cache in Android’s WebView we must do at least the following:

 
     
         webView. 
        setWebChromeClient 
        ( 
        new WebChromeClient 
        ( 
        )  
        { 
       

               @Override 
       

                
        public  
        void onReachedMaxAppCacheSize 
        ( 
        long spaceNeeded,  
        long totalUsedQuota, 
       

                            WebStorage. 
        QuotaUpdater quotaUpdater 
        ) 
       

                
        { 
       

                     quotaUpdater. 
        updateQuota 
        (spaceNeeded  
        *  
        2 
        ) 
        ; 
       

                
        } 
       
 
        } 
        ) 
        ; 
       

           
       

         webView. 
        getSettings 
        ( 
        ). 
        setDomStorageEnabled 
        ( 
        true 
        ) 
        ; 
       

           
       
 
        // Set cache size to 8 mb by default. should be more than enough 
       

         webView. 
        getSettings 
        ( 
        ). 
        setAppCacheMaxSize 
        ( 
        1024 
        * 
        1024 
        * 
        8 
        ) 
        ; 
       

           
       
 
        // This next one is crazy. It's the DEFAULT location for your app's cache 
       
 
        // But it didn't work for me without this line. 
       
 
        // UPDATE: no hardcoded path. Thanks to Kevin Hawkins 
       
 
        String appCachePath = getApplicationContext 
        ( 
        ). 
        getCacheDir 
        ( 
        ). 
        getAbsolutePath 
        ( 
        ) 
        ; 
       

         webView. 
        getSettings 
        ( 
        ). 
        setAppCachePath 
        (appCachePath 
        ) 
        ; 
       

         webView. 
        getSettings 
        ( 
        ). 
        setAllowFileAccess 
        ( 
        true 
        ) 
        ; 
       

         webView. 
        getSettings 
        ( 
        ). 
        setAppCacheEnabled 
        ( 
        true 
        ) 
        ; 
       
 
    

This will work. Well, this will make your WebView support caching.. doesn’t mean it will actually work.
You can tune cache policies using the following code, even though it’s not required to make it work:

 
     
         webView. 
        getSettings 
        ( 
        ). 
        setCacheMode 
        (WebSettings. 
        LOAD_DEFAULT 
        ) 
        ; 
       
 
    

Now when all the cache is setup we would like to see our HTML5 site working in pure offline mode.. but we don’t!
Why? well.. if it’s not working for you it probably means that the site you load up with the following call is actually redirecting you somewhere else:

 
         webView. 
        loadUrl 
        ( 
        "http://myHTML5app.com/app/" 
        ) 
        ;

If /app/ is resolving to a redirect – you are in trouble, sir.
The Cache mechanism will cache the actual RESULT of the redirect and sure it will map it to the url you are being REDIRECTED to, not the one you originally called. So once you are offline – the cache has no clue about the /app/ url and thus you are simply given the default android “can’t open page” replacement.

There are at least two ways to solve this issue..

Get rid of the redirect on the server

Re-redirect on android side

The first option is bad because you typically don’t want to mess with the working HTML5 site which is working on pure Browsers (iPhone, desktop, etc.).
To implement the second option I used the following code in the WebViewClient implementation:

 
          @Override 
        
         public  
         void onReceivedError 
         (WebView view,  
         int errorCode, 
        
         String description,  
         String failingUrl 
         ) 
        
         { 
        
         // The magic redirect   
        
         if 
         (  
         "http://HTML5app.com/app/". 
         equals 
         (failingUrl 
         )  
         )  
         { 
        
         // main.html is the place we are redirected to by the server if we are online 
        
                    mWebView. 
         loadUrl 
         ( 
         "http://HTML5app.com/app/main.html" 
         ) 
         ; 
        
         return 
         ;     
        
         } 
        
         else  
         if 
         (  
         "http://HTML5app.com/app/main.html". 
         equals 
         (failingUrl 
         )  
         )  
         {     
        
         // The cache failed – We don't have an offline version to show 
        
         // This code removes the ugly android's "can't open page" 
        
         // and simply shows a dialog stating we have no network 
        
                    view. 
         loadData 
         ( 
         "",  
         "text/html",  
         "UTF-8" 
         ) 
         ; 
        
                    showDialog 
         (DIALOG_NONETWORK 
         ) 
         ; 
        
         } 
        
         }

Good luck!

Tags: Android, cache, HTML5, hybrid, java
Posted in Development | 26 Comments »

Android, Hybrid apps and HTML5 databases

Friday, November 5th, 2010

If you use HTML5, most likely you are developing some web app which is supposed to support offline mode and most likely uses a local database.

Usually you create your HTML5 app for a browser and it works great as long as you run it in a real browser. But once you want a hybrid app things can really get painful.

A WebView is typically the heart of any hybrid app.. you have all of your HTML5 running in there but the really fancy or just platform dependent stuff can be done on the native side. Communication between Javascript and Native (Java on Android) is likely to be implemented using a bridge API or a local HTTP server which you will query using AJAX.

Android features a bridge API called JavascriptInterface which you can simply attach to a WebView and all the methods of the class you passed to it will be available in javascript under ‘window.$NAME.$method(…)’ where $NAME is the JavascriptInterface name you specified in your WebView setup code and $method is the Java method you can now simply call from JavaScript. Neat huh?

However, back to databases.
A very straightforward setup scenario with Javascript and Databases in mind:

 
         WebView webView =  
        new WebView 
        ( 
        this 
        ) 
        ; 
       
        // Out of scope. Just bare in mind that you wont be able 
       
        // to use your WebView without this 
       
        // as any request (intent) will be driven through Android system 
       
        // and will be opened in the default browser 
       
        // instead of your WebView. 
       
         webView. 
        setWebViewClient 
        (  
        new MyWebViewClient 
        ( 
        )  
        ) 
        ; 
       
         webView. 
        getSettings 
        ( 
        ). 
        setJavaScriptEnabled 
        ( 
        true 
        ) 
        ; 
       
         webView. 
        getSettings 
        ( 
        ). 
        setDatabaseEnabled 
        ( 
        true 
        ) 
        ;

This will fail to enable Database usage.
To make it all work together you will definitely need to enable DOM storage:

 
     
         webView. 
        getSettings 
        ( 
        ). 
        setDomStorageEnabled 
        ( 
        true 
        ) 
        ; 
       
 
    

You also will need to specify the file of the DB..:

 
     
         webView. 
        getSettings 
        ( 
        ). 
        setDatabasePath 
        ( 
        "/data/data/org.tapmania.alex.myapp/database" 
        ) 
        ; 
       
 
    

But even that is not enough.
You will need to tell Android that your quota for the database is at least twice as big as it is once it’s expired… now don’t ask me what that means but just stare at this code until fully satisfied:

 
         webView. 
        setWebChromeClient 
        ( 
        new WebChromeClient 
        ( 
        )  
        { 
       
            @Override 
       
        public  
        void onExceededDatabaseQuota 
        ( 
        String url, 
       
        String databaseIdentifier, 
       
        long currentQuota, 
       
        long estimatedSize, 
       
        long totalUsedQuota, 
       
                                 WebStorage. 
        QuotaUpdater quotaUpdater 
        ) 
       
        { 
       
                quotaUpdater. 
        updateQuota 
        (estimatedSize  
        *  
        2 
        ) 
        ; 
       
        } 
       
        } 
        ) 
        ;

In fact, this code will automatically update the quota and thus allow us to actually write a database file to disk and thus make the database work at all.

Cheers.

=================================================================================================

资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享一个很简明的demo 可以作为入门基础

学习的过程中做了点笔记整理如下虽然内容比较简单但是数量还是比较多的所以分了3篇

（上）包括Android设备多分辨率的问题，Android中构建HTML5应用程序基础

（中）包括Android与JS之间的互动，Android处理JS的警告对话框等，Android中的调试

（下）包括本地储存在Android中的应用，地理位置的应用，离线应用的构建

—————————————————————————————— 分割线 ————————————————————————————————————————

进入正题

● HTML5本地存储在Android中的应用

HTML5提供了2种客户端存储数据新方法：

localStorage 没有时间限制

sessionStorage 针对一个Session的数据存储

        Js代码   
        
      
 <script type="text/javascript">   
     localStorage.lastname="Smith";   
     document.write(localStorage.lastname);   
 </script>   
 <script type="text/javascript">   
     sessionStorage.lastname="Smith";   
     document.write(sessionStorage.lastname);  
 </script>   

WebStorage的API:

        Js代码   
        
      
 //清空storage  
 localStorage.clear();  
 //设置一个键值  
 localStorage.setItem(“yarin”,“yangfegnsheng”);  
 //获取一个键值  
 localStorage.getItem(“yarin”);   
 //获取指定下标的键的名称（如同Array）  
 localStorage.key(0);   
 //return “fresh” //删除一个键值  
 localStorage.removeItem(“yarin”);  
 注意一定要在设置中开启哦  
 setDomStorageEnabled（true）  

在Android中进行操作

        Java代码   
        
      
 //启用数据库  
 webSettings.setDatabaseEnabled(true);    
 String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();  
 //设置数据库路径  
 webSettings.setDatabasePath(dir);  
 //使用localStorage则必须打开  
 webSettings.setDomStorageEnabled(true);  
 //扩充数据库的容量（在WebChromeClinet中实现）  
 public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota,   
         long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {  
     quotaUpdater.updateQuota(estimatedSize * 2);  
 }  

在JS中按常规进行数据库操作

        Js代码   
        
      
 function initDatabase() {  
 try {  
     if (!window.openDatabase) {  
         alert('Databases are not supported by your browser');  
     } else {  
         var shortName = 'YARINDB';  
         var version = '1.0';  
         var displayName = 'yarin db';  
         var maxSize = 100000; // in bytes  
         YARINDB = openDatabase(shortName, version, displayName, maxSize);  
         createTables();  
         selectAll();  
     }  
 } catch(e) {  
     if (e == 2) {  
         // Version mismatch.  
         console.log("Invalid database version.");  
     } else {  
         console.log("Unknown error "+ e +".");  
     }  
     return;  
 }   
 }  
   
 function createTables(){  
     YARINDB.transaction(  
         function (transaction) {  
             transaction.executeSql('CREATE TABLE IF NOT EXISTS yarin(id INTEGER NOT NULL PRIMARY KEY, name TEXT NOT NULL,desc TEXT NOT NULL);', [], nullDataHandler, errorHandler);  
         }  
     );  
     insertData();  
 }  
   
 function insertData(){  
     YARINDB.transaction(  
         function (transaction) {  
         //Starter data when page is initialized  
         var data = ['1','yarin yang','I am yarin'];    
           
         transaction.executeSql("INSERT INTO yarin(id, name, desc) VALUES (?, ?, ?)", [data[0], data[1], data[2]]);  
         }  
     );    
 }  
   
 function errorHandler(transaction, error){  
     if (error.code==1){  
         // DB Table already exists  
     } else {  
         // Error is a human-readable string.  
         console.log('Oops.  Error was '+error.message+' (Code '+error.code+')');  
     }  
     return false;  
 }  
   
   
 function nullDataHandler(){  
     console.log("SQL Query Succeeded");  
 }  
   
 function selectAll(){   
     YARINDB.transaction(  
         function (transaction) {  
             transaction.executeSql("SELECT * FROM yarin;", [], dataSelectHandler, errorHandler);  
         }  
     );    
 }  
   
 function dataSelectHandler(transaction, results){  
     // Handle the results  
     for (var i=0; i<results.rows.length; i++) {  
         var row = results.rows.item(i);  
         var newFeature = new Object();  
         newFeature.name   = row['name'];  
         newFeature.decs = row['desc'];  
           
         document.getElementById("name").innerHTML="name:"+newFeature.name;  
         document.getElementById("desc").innerHTML="desc:"+newFeature.decs;  
     }  
 }  
   
 function updateData(){  
     YARINDB.transaction(  
         function (transaction) {  
             var data = ['fengsheng yang','I am fengsheng'];   
             transaction.executeSql("UPDATE yarin SET name=?, desc=? WHERE id = 1", [data[0], data[1]]);  
         }  
     );    
     selectAll();  
 }  
   
 function ddeleteTables(){  
     YARINDB.transaction(  
         function (transaction) {  
             transaction.executeSql("DROP TABLE yarin;", [], nullDataHandler, errorHandler);  
         }  
     );  
     console.log("Table 'page_settings' has been dropped.");  
 }  
 注意onLoad中的初始化工作  
 function initLocalStorage(){  
     if (window.localStorage) {  
         textarea.addEventListener("keyup", function() {  
             window.localStorage["value"] = this.value;  
             window.localStorage["time"] = new Date().getTime();  
         }, false);  
     } else {  
         alert("LocalStorage are not supported in this browser.");  
     }  
 }  
   
 window.onload = function() {  
     initDatabase();  
     initLocalStorage();  
 }  

● HTML5地理位置服务在Android中的应用

Android中

        Java代码   
        
      
 //启用地理定位  
 webSettings.setGeolocationEnabled(true);  
 //设置定位的数据库路径  
 webSettings.setGeolocationDatabasePath(dir);  
   
 //配置权限（同样在WebChromeClient中实现）  
 public void onGeolocationPermissionsShowPrompt(String origin,   
                GeolocationPermissions.Callback callback) {  
     callback.invoke(origin, true, false);  
     super.onGeolocationPermissionsShowPrompt(origin, callback);  
 }  

在Manifest中添加权限

        Xml代码   
        
      
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />  
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />  

HTML5中 通过navigator.geolocation对象获取地理位置信息

常用的navigator.geolocation对象有以下三种方法：

        Js代码   
        
      
 //获取当前地理位置  
 navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)  
 //持续获取地理位置  
 navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)  
 //清除持续获取地理位置事件  
 navigator.geolocation.clearWatch(watch_position_id)  

其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项

在JS中的代码

        Js代码   
        
      
 //定位  
 function get_location() {  
     if (navigator.geolocation) {  
         navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:false,maximumAge:1000,timeout:15000});  
     } else {  
         alert("Your browser does not support HTML5 geoLocation");  
     }  
 }  
       
 function show_map(position) {  
     var latitude = position.coords.latitude;  
     var longitude = position.coords.longitude;  
     var city = position.coords.city;  
     //telnet localhost 5554  
     //geo fix -82.411629 28.054553  
     //geo fix -121.45356 46.51119 4392  
     //geo nmea $GPGGA,001431.092,0118.2653,N,10351.1359,E,0,00,,-19.6,M,4.1,M,,0000*5B  
     document.getElementById("Latitude").innerHTML="latitude:"+latitude;  
     document.getElementById("Longitude").innerHTML="longitude:"+longitude;  
     document.getElementById("City").innerHTML="city:"+city;  
 }  
       
 function handle_error(err) {  
     switch (err.code) {  
     case 1:  
         alert("permission denied");  
         break;  
     case 2:  
         alert("the network is down or the position satellites can't be contacted");  
         break;  
     case 3:  
         alert("time out");  
         break;  
     default:  
         alert("unknown error");  
         break;  
     }  
 }  

其中position对象包含很多数据 error代码及选项可以查看文档

● 构建HTML5离线应用

需要提供一个cache manifest文件，理出所有需要在离线状态下使用的资源

例如

        Manifest代码   
        
      
 CACHE MANIFEST   
 #这是注释  
 images/sound-icon.png  
 images/background.png  
 clock.html   
 clock.css   
 clock.js    
   
 NETWORK:   
 test.cgi  
   
 CACHE:   
 style/default.css  
   
 FALLBACK:   
 /files/projects /projects  

在html标签中声明 <html manifest="clock.manifest">

HTML5离线应用更新缓存机制

分为手动更新和自动更新2种

自动更新：

在cache manifest文件本身发生变化时更新缓存资源文件发生变化不会触发更新

手动更新：

使用window.applicationCache

        Js代码   
        
      
 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛  
     window.applicationCache.update();  
 ｝   

在线状态检测

HTML5 提供了两种检测是否在线的方式：navigator.online（true/false） 和 online/offline事件。

在Android中构建离线应用

        Java代码   
        
      
 //开启应用程序缓存  
 webSettingssetAppCacheEnabled(true);  
 String dir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();  
 //设置应用缓存的路径  
 webSettings.setAppCachePath(dir);  
 //设置缓存的模式  
 webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  
 //设置应用缓存的最大尺寸  
 webSettings.setAppCacheMaxSize(1024*1024*8);  
   
 //扩充缓存的容量  
 public void onReachedMaxAppCacheSize(long spaceNeeded,  
             long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {  
     quotaUpdater.updateQuota(spaceNeeded * 2);  
 }  

（完）还有一个尾巴关于canvas绘图的不如之前记录的来的详细就不做介绍了

webview 设定和使用缓存来获取网页中的js，css和图片资源

android 2.3 sqlite WAL 机制询问

android sqlite db-journal文件产生原因及说明

Android, Hybrid apps and HTML5 databases

你可能感兴趣的:(android)

webview 设定和使用缓存来获取网页中的js，css和图片资源

android 2.3 sqlite WAL 机制 询问

android sqlite db-journal文件产生原因及说明

Android, Hybrid apps and HTML5 databases

你可能感兴趣的:(android)

android 2.3 sqlite WAL 机制询问