今回のGDDで一番聞きたかったセッションが、このHTML5のオフライン機能でした。
ちょうどWebStrageのプログラムを作ったばかりだったので、他のセッションよりも理解しやすかった内容でしたが、内容がいっぱいあった為、ついていくのに必死だった部分もあります。
オフライン機能で動作しているサイトのデモ
・AngryBirds
・NewyorkTimes
オフライン機能とは?
・インターネット回線が繋がっていなくても起動できる
・インターネット回線が繋がっていなくても動く
・インターネット回線が繋がっていなくてもデータの保存ができる
・インターネット回線が繋がってもデータの矛盾が発生しない
ローカル環境へのデータ保持方法としてWebStrage(localStrage/sessionStrage)の紹介
・構造化されていないデータ(文字列データ)の保存しかできない
・構造化されているものを保存するのであればJSONで文字列に変換する
・同期型のAPIである(処理を行っている間は何もできない)
・localStrageはブラウザを閉じてもデータが残るが、sesionStrageは残らない
・sessionStrageは新しいウインドウやタブを開いた時点で異なるデータ領域となる(一時的なデータの退避として使う)
ローカル環境へのデータ保持方法としてIndexedDBの紹介
・構造化されたデータの保存に向いてる
・構造型データをそのまま保存できる
・スキーマがなくSQLも使用できない
・今のところ構造化データを保持したいならこの方法しかない
・インデックスを使って検索を行う
・現在はChrome/Firefoxのみ対応している
・非同期型のAPIである
・イテレータにも対応している
ローカル環境へのデータ保持方法としてWebSQLの紹介
・非推奨
・モバイル機器がターゲットの場合はその限りではない
(モバイルはwebKitベースのブラウザなのでIndexedDBが使えない)
・将来的にPC系のブラウザには実装されないだろう
静的リソースの保存について(HTMLとかJSとかCSSをローカルに保存する)
・AppCacheを使う
・アプリケーションをまるごとローカルにキャッシュできる
・マニフェストファイルを記述するだけで自動的にローカルに保存される
・サーバへのリクエストが飛ばなくなるので動作も高速化される
・モバイルでのサポート率が高い
・マニフェストはHTMLのタグに記述
・マニフェストファイルの構造はキャッシュ/フォールバック/ネットワークに分けられる
・本体となるHTMLはマニフェストファイルの内容に関係なく必ずキャッシュされる
・マニフェストファイルの文法が間違っているとキャッシュされないのでチェック(http://manifest-validator.com/)すること
・コンテントタイプはしっかり指定すること
・マニフェストファイルを1文字でも変更すればローカルに再取込される
・jsからマニフェストの状況が取得できる
・manifestRという生成ツールがある(http://westciv.com/tools/manifestR/)
バイナリデータの保存
・FileSystemAPI
・ディレクトリを持ったファイルシステム上にデータをファイルとして保存できる
・OSの持つファイルを操作できるわけではない
・サンドボックス化されている為、他のオリジンからは切り離されている
・画像/音声/動画などのバイナリデータ保存に最適
・URLを使って直接参照が可能
・非同期のAPI
・window.requestFileSystemでファイルサイズを指定するが、今のところChromeでは意味がない
ファイルURLを作る方法
・DataURLを使用する
・BlobURLを使用する
・FileSystemのURL(filesystem:)を使用する
データの同期について
・オンライン時/オフライン時のそれぞれのデータの同期を行う
・オンラインバージョン・オフラインバージョンの起動処理を分ける
・サーバサイドに機能を補完するファイルを用意しておき、オフライン時にフォールバックさせる
・テンプレートを使ってjsでパース・フィル
データの同期のSharedWorkerを使う
・接続状況を一元管理できる
・ウィンドウをまたいで使用してもデータの一貫性が保てる
・サーバー通信など、一部のコードを集中管理することで、複数ウィンドウにまたがったアプリのメモリ使用量を節約できる
・オンライン/オフライン状況の取得デモ
オフライン機能を使ってアプリのパフォーマンスアップ
・Cookieの代わりにWebStrageを使う
・サーバーの代わりにクライアント側のDBを使う
・オフラインアプリだけでなく、オンラインアプリでもAppCacheを使う
・バイナリファイルをブラウザで保存する
オフライン機能でのデバック
・chrome://appcache-internals/
・chrome://blob-internals/
・chrome://quota-internals/
ブラウザのサポート状況/Polyfillについて等、役立つ情報について