WebView で Web Storage / Web SQL Database を利用する設定

WebView 内で HTML5 のストレージ機能を利用する場合には、いくつか設定しなければならない項目があります。

ここでは Web Storage と Web SQL Database を利用する方法を示します。

Web Storage は HTML5 の標準機能として含まれる予定。

Web SQL Database はスタンダードからは外れましたが、Google と Apple が支持を表明しているだけに、今後もスマートフォン向けのウェブサイト開発時には十分利用を検討できるものといえるでしょう。

WebView 内で HTML5 のストレージ機能を利用する

はじめに Web Storage と Web SQL Database を利用するための WebView の設定を行うコードを示します。

package com.keicode.android.test;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebStorage.QuotaUpdater;

public class WebViewTest1Activity extends Activity {

  WebView webView;
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
        
    webView = (WebView)findViewById(R.id.webView1);
    webView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean shouldOverrideUrlLoading(
        WebView view, 
        String url) {
        return false;
      }
    });
        
    webView.setWebChromeClient(new WebChromeClient(){
      @Override
      public void onExceededDatabaseQuota(
        String url,
        String databaseIdentifier, 
        long currentQuota,
        long estimatedSize, 
        long totalUsedQuota,
        QuotaUpdater quotaUpdater) {
        quotaUpdater.updateQuota(5 * 1024 * 1024);
      }
    });

    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDomStorageEnabled(true);

    webSettings.setDatabaseEnabled(true);
    String databasePath = getApplicationContext()
      .getDir("database", Context.MODE_PRIVATE).getPath();
    webSettings.setDatabasePath(databasePath);

    webView.loadUrl("http://...");
  }
}

このコードのポイントを説明します。

JavaScript の有効化

まずは JavaScript を利用するので、setJavaScriptEnabled メソッドで JavaScript を有効にします。

        webSettings.setJavaScriptEnabled(true);

Web Storage の有効化

Web Storage を有効化するには setDomStorageEnabled メソッドを利用します。

      webSettings.setDomStorageEnabled(true);

Android API のドキュメントには "Set whether the DOM storage API is enabled." (DOM ストレージ API が有効かどうか設定する) と記載されていますが、実際のところこれを有効化 (true をセット) すると HTML5 の Web Storage が有効化されます。

Web SQL Database の有効化

Web SQL Database を有効化するには、次の設定をします。

  webView.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onExceededDatabaseQuota(
      String url,
      String databaseIdentifier, 
      long currentQuota,
      long estimatedSize, 
      long totalUsedQuota,
      QuotaUpdater quotaUpdater) {
      quotaUpdater.updateQuota(5 * 1024 * 1024);
    }
  });
  ...
  webSettings.setDatabaseEnabled(true);
  String databasePath = getApplicationContext()
    .getDir("database", Context.MODE_PRIVATE).getPath();
  webSettings.setDatabasePath(databasePath);

setDatabaseEnabled メソッドでデータベース API を有効化します。次に setDatabasePath メソッドでデータベースファイルのパスを指定。さらに WebChromeClient を指定することによって、データベースクォータを越えたときの動作を指定します。

デバッグ時に役立つ？エラーメッセージ

ちなみに、エラー発生時の動作は試したところ、次のようになりました。

setDatabaseEnabled(true) を呼び出していない場合、実行時にデバッガに次のエラーが表示されました。

Uncaught TypeError: Cannot call method 'transaction' of null at ...

Web SQL Database 利用時のエラー

また、データベースのパスを指定しない場合は次のように、sqlite データベースファイルが開けないというエラーメッセージもデバッガで表示されました。

sqlite returned: error code = 14, msg = cannot open file...
Uncaught TypeError: Cannot call method 'transaction' of null at ...