HTML5 オフライン ストレージの管理

HTML5 では、大量のデータをユーザーのブラウザにローカルに保存できるストレージ API が多数導入されています。ただし、各アプリに割り当てられる容量は、デフォルトで数メガバイトに制限されています。Google Chrome では、これまでの上限だった 5 MB を超えて、保存容量を増やすことができます。

このドキュメントでは、Chrome で使用されるストレージの種類に関する基本的なコンセプトと、保存容量の割り当てを管理できる試験運用版の Quota Management API について説明します。このドキュメントは、クライアントサイド ストレージの一般的なコンセプトに精通し、オフライン API の使用方法を理解していることを前提としています。

目次

  1. ストレージのタイプ
    1. 一時的
    2. 永続
    3. 無制限
    4. ストレージ タイプの比較
  2. 割り当ての管理
    1. クエリ ストレージの使用量と提供状況
    2. 保存容量の追加をリクエスト
    3. テスト用の割り当てをリセットする
  3. API リファレンス
    1. 定数
    2. メソッドの概要
    3. メソッド
  4. 今後の展開

ストレージの種類

Google Chrome では、次の 3 種類のストレージをリクエストできます。

以降のセクションでこれらのストレージ タイプについて詳しく説明し、下のでは他のストレージ タイプを比較しています。

一時ストレージ

一時ストレージは、どのウェブアプリでも使用できる一時的なストレージです。Chrome はアプリに一時ストレージを自動的に付与するため、割り当てをリクエストする必要はありません。

プールの共有

一時ストレージは、ブラウザで実行されているすべてのウェブアプリで共有されます。共有プールには、使用可能なディスク容量の 1/3 を使用できます。アプリですでに使用されているストレージは、共有プールの計算に含まれます。つまり、(available storage space + storage being used by apps) * .333 に基づいて計算されます。

各アプリは共有プールの最大 20% を使用できます。たとえば、使用可能な合計ディスク容量が 60 GB の場合、共有プールは 20 GB、アプリは最大 4 GB を使用できます。使用可能なディスク容量(60 GB)の 1/3(最大 20 GB)の 20%(最大 4 GB)から計算されます。

容量の追加をリクエストしています

アプリで使用できる保存容量とすでに保存されているデータの量をクエリすることはできますが、追加の一時的な保存容量をリクエストすることはできません。アプリが割り当てられた割り当てを超えると、エラーがスローされます。

空き容量が残りわずかになっています

プール全体のストレージ割り当てを超過すると、最も長い間使われていないホストに保存されているデータ全体が削除されます。ただし、LocalStorage と SessionStorage のデータはブラウザによって消去されません。他のオフライン API に保存されたデータの場合、アプリデータが予期しない方法で破損しないように、ブラウザはデータの一部ではなく全体を削除します。

各アプリの使用容量はストレージ プールの最大 20% に制限されているため、削除が行われるのは、ユーザーが実際に実行しているオフライン アプリが、それぞれ最大 5 つのストレージを使用している場合のみです。

ただし、ユーザーがハードドライブにファイルを追加すると、使用可能な保存容量が縮小される場合があります。使用可能なディスク容量が限られると(共有プールで使用できるディスク容量の半分しか取得できないことに注意してください)、ブラウザは最も長い間使用されていないホストに保存されたすべてのデータを削除します。

永続ストレージ

永続ストレージは、ユーザーが消去しない限りブラウザ上に残るストレージです。これは File System API を使用するアプリでのみ使用できます。ただし、将来的には IndexedDB やアプリケーション キャッシュなどの他のオフライン API でも使用できるようになる予定です。

アプリケーションには、一時ストレージよりも多くの永続ストレージの割り当てを設定できますが、Quota Management API を使用してストレージをリクエストし、より多くの容量を使用する権限をユーザーから付与してもらう必要があります。Chrome に情報バーが表示され、アプリにローカル ストレージの容量を増やすよう求めるメッセージが表示されます。

無制限ストレージ

無制限ストレージは永続ストレージと似ていますが、Chrome アプリと拡張機能(.crx ファイル)でのみ使用できます。無制限ストレージのサイズは、ユーザーのハードドライブの空き容量によってのみ制限されます。アプリまたは拡張機能のマニフェスト ファイルで unlimitedStorage 権限をリクエストできます。インストール時に、アプリや拡張機能に必要な権限がユーザーに通知します。インストールを続行すると、ユーザーは manifest.json ファイルに URL がリストされているすべてのページに対する権限を暗黙的に付与します。

詳しくは、アプリ拡張機能のそれぞれのデベロッパー ガイドをご覧ください。

ストレージ タイプの比較

次の表に、3 種類のストレージの違いを示します。

 一時ストレージ永続ストレージ無制限ストレージ
基本的な説明

任意のウェブアプリで利用できる一時的なストレージ。

自動的に取得されるため、リクエストする必要はありません。

割り当て管理 API を介してリクエストし、ユーザーが付与する必要がある永続ストレージ。

Chrome 拡張機能とアプリのための永続ストレージ。

これはマニフェスト ファイルで設定し、ユーザーが許可する必要があります。

利用可能な国と地域

すべてのウェブアプリ。

すべてのウェブアプリ。Chrome 拡張機能と、ホストおよびインストールされたウェブアプリに固有の機能です。
権限選択していません。明示的にリクエストしなくても使用できる。

Quota Management API を使用して追加のストレージをリクエストする必要がある。

アプリまたは拡張機能のマニフェスト ファイルで unlimitedStorage 権限をリクエストできます。
初回使用時のユーザー エクスペリエンスユーザーには表示されません。アプリは動作するだけです。

Chrome に情報バーが表示され、ストレージ リクエストを承諾または拒否するよう求められます。

ただし、リクエストした割り当て量がアプリの現在の割り当てよりも少ない場合、プロンプトは表示されません。それより大きい割り当ては保持されます。

インストール時に、アプリや拡張機能に必要な権限がユーザーに表示されます。インストールを続行することで、ユーザーは app または extension の manifest.json ファイルに URL がリストされているすべてのページに対して暗黙的に権限を付与します。

その後ストレージ追加をリクエストする際のユーザー エクスペリエンス適用外。追加の一時的なストレージをリクエストすることはできません。

ユーザーに再度確認メッセージが表示されます。

 

アプリや拡張機能による割り当ての増加をリクエストしても、Chrome はインストール後にユーザーにメッセージを表示しません。
データの永続性

一時的。ブラウザがデータを削除できる。

永続的。ユーザーの指示がない限り、ブラウザがデータを削除することはありません。データは後続のアクセスで使用できます。

ユーザーが削除できるため、データが永続的であると想定しないでください。

永続ストレージと同じです。

 

デフォルトの保存先

共有プールの最大 20%。

0 MB。特定の保存容量を明示的に要求する必要があります。

0 MB。マニフェスト ファイルで明示的に unlimitedStorage を要求する必要があります。

ストレージ要件を指定しない場合、Chrome は一時ストレージの共有プールからアプリにストレージを割り当てます。

最大保存容量共有プールの最大 20%。ハードドライブの空き容量と同じ容量。固定されたストレージ プールはありません。ハードドライブの空き容量と同じ容量。
おすすめの使用例キャッシュ。オフラインで動作するアプリ、またはアセットが多数あるアプリ。Google Chrome で動作するように設計されたアプリ。
使用できる API

オフライン API

  • アプリのキャッシュ
  • File System
  • IndexedDB
  • WebSQL(2010 年 11 月 18 日より非推奨

注: LocalStorage や SessionStorage などのウェブ ストレージ API は 5 MB に固定されています。

ファイル システム API

オフライン API

  • アプリのキャッシュ
  • File System
  • IndexedDB
  • WebSQL(非推奨)

注: LocalStorage や SessionStorage などのウェブ ストレージ API は 5 MB に固定されています。

割り当ての管理

Chrome 13 で導入された Quota Management API を使用すると、次のことができます。

API は、グローバル オブジェクト window.webkitStorageInfo を使用して実装されます。

リファレンス ドキュメントについては、次のセクションをご覧ください。

ストレージの使用状況と可用性をクエリする

使用中のストレージ サイズとホストの空き容量を照会するには、次のように queryUsageAndQuota() を呼び出します。

  • 確認するストレージの種類
  • 成功のコールバック

各ストレージはメタデータを格納するために追加のバイトを必要とする場合があるため、API によってレポートされる使用量がユーザーデータの実際のサイズと一致しないことがあります。また、ステータスの更新が遅れて、API に最新のストレージ ステータスが反映されない場合もあります。

次のコード スニペットは、保存容量について確認する方法を示しています。

// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
    function(usedBytes, grantedBytes) {
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    },
    function(e) { console.log('Error', e);  }
);

永続ストレージのステータスを確認したい場合は、単に webkitStorageInfo.TEMPORARYwebkitStorageInfo.PERSISTENT に置き換えます。列挙型は window オブジェクト(グローバル名前空間)にも存在するため、window.PERSISTENTwindow.TEMPORARY も使用できます。

追加の保存容量をリクエストしています

割り当ては自動的に行われ、(で説明されているように)上限を超えることはないため、追加の一時ストレージを要求する必要はありません。

File System API 用の永続ストレージの場合、デフォルトの割り当ては 0 であるため、アプリケーションのストレージを明示的にリクエストする必要があります。次のように requestQuota() を呼び出します。

  • ストレージの種類
  • サイズ
  • 成功のコールバック

リクエストの内容に応じて、次のようになります。

  • 割り当ての増加をリクエストすると、ブラウザは情報バーをユーザーに表示し、割り当ての増加に対する権限を付与するか拒否するかを求めます。場合によっては、リクエストが自動的に拒否され、現在の割り当て以下の割り当てが返されることがあります。
  • リクエストした割り当て量がアプリの現在の割り当てよりも少ない場合、プロンプトは表示されません。
  • 上限を超えるストレージをリクエストすると、エラー(QUOTA_EXCEEDED_ERR)が表示されます。
  • ユーザーがすでに権限を付与した後で requestQuota() を再度呼び出しても、何も起こりません。そのため、メソッドを再度呼び出す必要はありません。

以下は、追加の保存容量をリクエストする方法を示しています。

// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);

    }, function(e) { console.log('Error', e); }
);
});

テスト用の割り当てをリセットする

アプリでストレージをテストする場合、アプリで割り当て管理を新たにテストできるように、保存されているデータを消去することをおすすめします。手順は次のとおりです。

  1. アドレスバーに「chrome://settings/cookies」と入力します。
  2. 自分のアプリを探します。
  3. アプリを選択
  4. ハイライト表示された選択項目の右側にある [X] をクリックします。

API リファレンス

このセクションでは、Quota Management API のメソッドについて説明します。

定数

以下は、ストレージのタイプを示す webkitStorageInfo 定数です。

定数説明
TEMPORARY0一時的なストレージ。
PERSISTENT1永続ストレージ。

メソッドの概要

queryUsageAndQuota
requestQuota

Methods

queryUsageAndQuota

使用中のストレージ サイズとホストの空き容量を確認します。

 // you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
      successCallback,
      errorCallback);
  • successCallback: 次の 2 つのパラメータを持つ省略可能なコールバック。

    • アプリが使用している現在のバイト数。
    • 割り当ての残りのバイト数。
  • errorCallback: 省略可能なエラー コールバック。

requestQuota

保存容量の追加をリクエストしてください。ブラウザは、保存容量を追加する権限をアプリに付与または拒否するようユーザーに促す情報バーを表示します。

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);
パラメータ
  • newQuotaInBytes: 保存容量の必要なバイト数。
  • successCallback: 許可されているバイト数を渡すオプションのコールバック。
  • errorCallback: 省略可能なエラー コールバック。

今後の開発

IndexedDB、アプリケーション キャッシュ、ファイル システム、指定可能なその他の API など、すべての HTML5 オフライン ストレージ API を Quota Management API に配置する予定です。これにより、すべてのストレージの割り当てを管理できるようになります。