Contenu connexe
Similaire à オフラインファーストの思想と実践
Similaire à オフラインファーストの思想と実践 (20)
Plus de Shumpei Shiraishi
Plus de Shumpei Shiraishi (20)
オフラインファーストの思想と実践
- 10. オフライン
スピード
でも使える
ユーザビリティの向上
- 20. アプリケーションキャッシュ
CACHE MANIFEST
index.html
index.css
index.js
ローカル サーバ
- 21. アプリケーションキャッシュ
CACHE MANIFEST
index.html
オフラインで index.css
index.js
利用可能
ローカル サーバ
- 23. キャッシュマニフェストの例
CACHE MANIFEST
# v: 201302061503
hello.html
hello.css
hello.js
hello.jpg
NETWORK:
*
<html manifest="site.appcache">
...
</html>
- 24. アプリケーションキャッシュの
「落とし穴」
通常のHTTPキャッシュも怠らないで！
キャッシュ容量は実装依存
キャッシュは時間がかかる
開発フローを改善しよう
- 28. Indexed Database API
• ブラウザ組み込みのキー・バリューストア
• WebStorageよりも複雑だが高機能
• RDBのテーブルにあたるものがオブジェクトストア
• JavaScriptオブジェクトをオブジェクトストアに対して
そのまま読み書きできる。
- 29. Indexed Database API
のコード例
var req = indexedDB.open(DB_NAME, latestVersion);
req.onsuccess = function(event) {
db = req.result;
var tx = db.transaction("FeedStore", "readonly");
var feedEntryStore = tx.objectStore("FeedStore");
var curReq = feedEntryStore.openCursor();
var results = [];
curReq.onsuccess = function() {
var cursor = curReq.result;
if (!cursor) {
return;
}
var entry = cursor.value;
results.push(entry);
cursor.continue(); // カーソルを次に進める
};
};
- 31. File API
• Webアプリからファイルを読み書きする
ためのAPI。
• 以下の3仕様からなる。
– File API・・・ファイルの読み取りや基本的な
インターフェースの定義
– File API:Writer・・・ファイルの書き出し
– File API:Systems and Directories・・・ファ
イルシステムとディレクトリ構造
- 35. 2. ラッパーを通じて
Web APIを呼び出す
button.onclick = function() {
$.get('/memo', function() {...});
};
Ajax呼び出しを直接行わない。
button.onclick = function() {
WebAPI.loadMemo(function() { ... });
};
- 36. 3. 抽象化したオブジェクトを
通じてデータを操作する
button.onclick = function() {
WebAPI.loadMemo(function() { ... });
};
データソースを抽象化する！
button.onclick = function() {
Memo.get(function(memo) { ... });
};
- 37. User Data Web API
Interface Controller Wrapper
Name:
E-mail:
Submit
データの永続化 データの同期
- 40. 同期処理の実装は
難しい。
同期処理中にオフラインになったら？
データ変更が衝突したら？
同期量を「必要最小限」に留めるには？
