HTML5 のオフライン機能

  -  

http://goo.gl/FsKEq

Who?

+


@

デモ

オフラインとは

アジェンダ

動的なデータの保存

動的なデータの保存

ユーザーデータや設定等

Web Storage (localStorage / sessionStorage)

IndexedDB / WebSQL

localStorage

sessionStorage

Same Origin Policy

  http://example.com:80/
    \       \         \_ port
     \       \_ domain
      \_ scheme

IndexedDB とは

IndexedDB での検索

インデックスを取得 ( index ):

// db.createObjectStore("Friend", "id", true);
db.createIndex("FriendNames", "name", false);
var index = db.openIndex('FriendNames');
var id = index.get('Eric');

イテレート ( cursor ):

// name の始まりを A-E に制限
var range = new KeyRange.bound('A', 'E');
var cursor = index.openObjectCursor(range);

while (cursor.continue()) {
  console.log(cursor.value.name);
}

var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
  var db = event.srcElement.result;
  var transaction = db.transaction([], IDBTransaction.READ_ONLY);
  var curRequest = transaction.objectStore('ObjectStore Name').openCursor();
  curRequest.onsuccess = ...;
};

WebSQL DB

静的リソースの保存

静的リソースの保存

HTML や CSS, JS, 画像等

App Cache

App Cache

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

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 を使いこなす

バイナリデータの保存

バイナリデータの保存

ユーザーデータのうちバイナリのもの

File System API

ファイルシステムを開く

window.requestFileSystem(
  TEMPORARY,        // 永続的か、一時的か
  1024 * 1024,      // 必要な領域サイズ (バイト)
  initFs,           // 成功時のコールバック
  opt_errorHandler  // エラー時のコールバック (オプション)
);

ファイルへの URL を作る 3 つの方法

var img = document.createElement('img');

// filesystem:http://example.com/temporary/myfile.png
img.src = fileEntry.toURL();
document.body.appendChild(img);

Filesystem URL からファイルを取得する:

window.resolveLocalFileSystemURL(img.src, function(fileEntry) { ... });

サンプルコード: ドロップしたファイルを複製する

document.querySelector('#terminal').ondrop = function(e) {
  var files = e.dataTransfer.files;
  window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    Array.prototype.slice.call(files || [], 0).forEach(function(file, i) {
      fs.root.getFile(file.name, {create: true, exclusive: true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
          fileWriter.write(f); // write() は File | Blob を引数に取ることができる
        }, errorHandler);
      }, errorHandler);
    });
  }, errorHandler);
};

DEMO: Peephole Extension


Example page

Install

データの同期

データの同期

データの同期: Shared Worker を使う方法

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

この Shared Worker により:

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);

アプリのパフォーマンス向上

オフライン機能を使ってパフォーマンスを向上する

オフライン機能のデバッグ

Quota

Google Chrome でのクォータ

クォータ

デフォルト (Temporary)リクエストされた Quota (Persistent)
Web Storage5MbN/A
App Cache利用可能なディスク容量の 10%
IndexedDB
WebSQL
File System API任意

Quota API

// 状況を問い合わせる
webkitStorageInfo.queryUsageAndQuota( 
    webkitStorageInfo.TEMPORARY,   // or PERSISTENT 
    usageCallback, 
    errorCallback); 

// クォータをリクエストする
webkitStorageInfo.requestQuota( 
    webkitStorageInfo.PERSISTENT
    newQuotaInBytes,
    quotaCallback, 
    errorCallback);

Chrome ウェブアプリなら無限のクォータを得ることができます

manifest.json ファイルにパーミッション "unlimitedStorage" を追加することで、クォータを無制限にすることができます。

appmator.appspot.com を利用して、簡単にアプリをパッケージ化できます。

役立つ情報

ブラウザサポート状況

Web StorageYYYYY (8+)
IndexedDBYNYNN
WebSQLNYYYN
App CacheYYYYN
File System APINNYNN

ブラウザサポート状況 (モバイル)

Web StorageYYY (2+)YY
IndexedDBYNNNN
WebSQLNYY (2+)YN
App CacheYYY (2.1+)YN
File System APINNY (3+)NN

Polyfill

Web Storage (LocalStorage と SessionStorage)

More Resources

Thank you!

Questions?