強火で進め

このブログではプログラム関連の記事を中心に書いてます。

HTML5 のオフライン機能

GDD2011 HTML5

Google Developer Day 2011に参加しました。

参加したセッションのメモを書いときます。

(追記 2012/01/14)
Googleから動画が公開されました。
http://www.youtube.com/watch?v=MY06xnSZyaw:moive
※このセッションで解説された内容に一部変更点があるとのことなので、こちらも合わせて参照下さい。
(追記ここまで)

HTML5 のオフライン機能(Eiji Kitamura) @agektmr

東京 - Google Developer Day 2011
http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1001.html

スライド

動的なデータの保存
  • Web Storage (localStorage / sessionStorage)
  • IndexedDB / WebSQL
localStorage
  • シンプルなキーバリュー型
  • 文字列しか保存できない
sessionStorage
  • localStorage とほぼ同じ。ただし...
  • ブラウザを閉じると消されてしまう
  • 新しいウィンドウやタブで開くと、別のセッションとして扱われる (Cookie のようには使えない)
  • その為、入力フォームを含んだページなどを複数のウィンドウで開いてもプログラム内での整合性が壊れる事は無い
オリジン(Origin)

※【筆者注】オリジンについては以前にこのブログでも解説した事が有ります。

HTMLでオリジン(Origin)とは何を意味しているのか - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110113/1294937964

IndexedDB とは
  • スキーマがなく、SQL も使わない
  • 現在は Chrome と Firefox のみが実装。ただし他のメジャーブラウザも対応予定
  • 非同期の API
WebSQL DB
  • 非推奨 (今後この仕様が発展することはありません)
  • モバイル機器がターゲットの場合は有効
  • Android/iPhoneで使える
  • Lawnchair
静的リソースの保存
  • App Cache
    • HTML や CSS、JavaScript を手軽にキャッシュできる
    • モバイルでのサポート率が高い

【記述例】
使用する側のHTMLでの記述

<html manifest="example.appcache">... </html>

mainfestファイルの記述

CACHE MANIFEST
# 2010-11-17-v0.0.1

# 明示的にキャッシュされるエントリ
CACHE:
index.html
stylesheet.css
images/logo.png

# ユーザーがオフラインの場合は static.html が表示される
FALLBACK:
/ /static.html

# ユーザーがオンラインの必要があるリソース
NETWORK:
*
App Cache を使いこなす
  • App Cache を指定する HTML は無条件にキャッシュされる
  • manifest の文法が間違っていると、キャッシュされない(validator での確認がおすすめ)
  • キャッシュ指定されたファイルが1つでも404なら全くキャッシュされない
  • manifest ファイルの Content-Type は text/cache-manifest
  • manifest ファイルを一文字でも変更すれば自動的にバージョンアップ
  • manifest ファイル生成ツール manifestR
  • appcachefacts.info
バイナリデータの保存
  • File System API
    • ディレクトリを持ったファイルシステム上にデータをファイルとして保存できる
    • 好きな位置に保存出来るわけでない
    • URL を使って直接参照することができる

【URLの例】

filesystem:http://example.com/temporary/myfile.png
データの同期
  • オンラインバージョンとオフラインバージョンは、起動時の処理を分ける
  • サーバーサイドの機能を補完するファイルを用意しておき、オフライン時に FALLBACK させる

※【筆者注】FALLBACKは先ほど出てきたmainfestファイルの記述例では以下の部分で指定しています。

# ユーザーがオフラインの場合は static.html が表示される
FALLBACK:
/ /static.html
データの同期: Shared Worker を使う方法

サーバーと直接通信する代わりに、オンライン時に通信を肩代わりし、変更点をローカルに保存してくれる Worker を用意し、これとやりとりをする。

navigator.onLine - 通信状況の確認
  • navigator.onLineで現在、ネットワークに繋がっているかどうかをチェック出来る

【記述例】

if (navigator.onLine) {
  console.log('ONLINE!');
} else {
  console.log('Connection flaky');
}
  • リスナーに登録しておいネットワークの状態が変わった時に発生するイベントで処理を行う事も可能

【記述例】

window.addEventListener('online', function(e) {
  // サーバーとデータを再同期
}, false);

window.addEventListener('offline', function(e) {
  // サーバーとのやり取りをキューに追加
}, false);
オフライン機能のデバッグ

Chromeではアドレスバーに以下を入力する事で使える便利な機能が有る。

※ chrome://quota-internals/ は現在、Devチャンネル版だと壊れている

クォータ(使用可能なファイルやメモリサイズ)
  • こちらを参照
  • Quota APIは今の所、ドキュメントがほぼ無い状態
  • Chrome ウェブアプリなら無限のクォータを得ることができます
  • manifest.json ファイルにパーミッション "unlimitedStorage" を追加することで、クォータを無制限にすることができます。

(2011/11/16 追記)
講演者の北村 英志さんのGoogle+にて以下のコメントが有りました。

ChromeのQuota管理機能について記事を書きました。この内容は #gdd11jp の講演内容と矛盾しています。その辺りは追ってお知らせします

https://plus.google.com/107085977904914121234/posts/ALyGEqdCVE6
(追記ここまで)

便利な情報
Polyfill

Polyfillとは新しいAPIなどの代わりに使用可能なライブラリなどの事。

その他のリソース

Using the HTML5 Filesystem API: A True Filesystem for the Browser

Using the HTML5 Filesystem API: A True Filesystem for the Browser

関連情報

オフライン系APIを解説した本。

徹底解説HTML5APIガイドブック オフライン系API編

徹底解説HTML5APIガイドブック オフライン系API編