【Androidアプリ作成】HTML5 Application Cacheを使ってみる

HTML5の「Application Cache」を使うと
WEBページのオフライン表示を比較的容易に実現できる。

この機能は、初めてアクセスした時に表示に必要なファイルを全部
ダウンロードし、次回以降は不必要な通信を行われずに
表示されるといった挙動となる。

オフラインでも表示できるのが最大のメリット。

いくつか対応に手間取ったので、備忘録も兼ねてメモ。

■HTMLにmanifestを記載
——————————
<html lang="ja" manifest="cache.appcache">
<head></head>
<body></body>
</html>
——————————
※便宜上「～.appcache」としているが別指定も可能

■cache.appcacheを作成
アクセスするディレクトリ直下にcache.appcacheを作る
——————————
CACHE MANIFEST

# Version 201207170123

## Cache Files
CACHE:
index.html
style.css
data/data.json
js/script.js

## Network Files
NETWORK:
*
——————————
一行目はCACHE MANIFEST固定
「CACHE:」以降にローカル保存するファイルを記載
「NETWORK:」以降は毎回取りに行くファイルを記載

■Content-Typeのmanifest対応
アクセスするディレクトリ直下に.htaccessを作り
以下の内容を記載。
——————————
AddType text/cache-manifest .appcache
——————————

■apacheの設定変更(必要に応じて)
——————————
<Directory />

Options All

AllowOverride All
</Directory>
——————————
※環境によっては'/'ではないことも。適宜 $DOCUMENT_ROOT に読み替える。
apache再起動も忘れずに。

■WebView対応
AndroidからWebView経由でアクセスする場合は追加で必要。
——————————
public class MainActivity extends Activity {

@Override

public void onCreate( Bundle savedInstanceState ) {

super.onCreate( savedInstanceState );

WebView webView = new WebView( this );

webView.getSettings().setAppCacheEnabled( true );

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

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

webView.loadUrl( "http://www.darkdrive.net/index.html?from=blog" );

ViewGroup vg = (ViewGroup)findViewById( R.id.vgApp );

vg.addView( webView );

}
}
——————————

ファイル更新時は、忘れずに cache.appcache を適宜書き換える。

本機能により通信しなくてもWEB表示できるようにはなるが、
あらかじめダウンロードを行う分、
最初のネットワークの使用量が多くなってしまう。

利便性を考慮すると、ユーザーが設定で切り替えられるように
したほうがいいかも。

2012.7.17
NECO

バルルカ通信