Persistent Storage API: Webアプリケーションのストレージクォータの理解と管理

Persistent Storage APIは、Web開発者がユーザーのブラウザ内でストレージクォータを要求および管理するための標準化された方法を提供します。サイズが制限され、自動的に削除されることが多い従来のストレージメカニズム（CookieやlocalStorageなど）とは異なり、Persistent Storage APIを使用すると、アプリケーションはより多くのストレージ容量を要求でき、重要なことに、ストレージを永続化するように要求できます。つまり、ブラウザはストレージに負荷がかかっている場合でも、自動的にストレージをクリアしません。

Persistent Storageが重要な理由

今日のWebでは、プログレッシブウェブアプリ（PWA）がますます一般的になり、ユーザーはリッチなオフライン体験を期待しているため、信頼性の高いストレージが不可欠です。次のシナリオを検討してください。

• ドキュメントへのオフラインアクセス: ドキュメント編集アプリケーション（Googleドキュメントなど）は、インターネットに接続していなくてもユーザーが作業を続行できるように、ドキュメントをローカルに保存する必要があります。
• メディア再生: SpotifyやNetflixなどのストリーミングサービスでは、ユーザーがオフライン再生のためにコンテンツをダウンロードでき、かなりのストレージ容量が必要です。
• ゲームデータ: オンラインゲームでは、ユーザーの進行状況、レベル、アセットをローカルに保存して、スムーズで応答性の高いエクスペリエンスを提供することがよくあります。
• 大規模なデータセットのキャッシュ: マッピングアプリケーション（Googleマップ、OpenStreetMapベースのアプリなど）など、大規模なデータセットを扱うアプリケーションは、データをローカルにキャッシュすることで、ネットワークリクエストを減らし、パフォーマンスを向上させることができます。
• ローカルデータ処理: 大量のデータ処理（画像編集、ビデオ編集など）を実行するWebアプリケーションは、中間結果をローカルに保存して、繰り返しの計算を回避できます。

永続的なストレージがない場合、ブラウザはデバイスの空き容量が少なくなると、これらのアプリケーションで使用されるストレージを自動的にクリアし、フラストレーションのたまるユーザーエクスペリエンスや潜在的なデータ損失につながる可能性があります。Persistent Storage APIは、アプリケーションが永続的なストレージを要求し、ストレージの使用状況を追跡するためのメカニズムを提供することで、この問題に対処します。

ストレージクォータの理解

すべてのブラウザは、各オリジン（ドメイン）に一定量のストレージスペースを割り当てます。このストレージクォータは固定ではなく、デバイスの総ストレージ容量、利用可能な空き容量、ユーザーのブラウザ設定などの要因によって異なります。Storage APIは、利用可能なストレージクォータとすでに使用されているストレージ量をクエリする方法を提供します。

ストレージクォータのクエリ

navigator.storageインターフェイスは、ストレージ関連の情報へのアクセスを提供します。estimate()メソッドを使用すると、利用可能なストレージクォータとアプリケーションで使用されているストレージ量の見積もりを取得できます。返されるオブジェクトには、usageプロパティとquotaプロパティが含まれており、どちらもバイト単位で測定されます。

            
async function getStorageEstimate() {
  if (navigator.storage && navigator.storage.estimate) {
    const estimate = await navigator.storage.estimate();
    console.log(`Usage: ${estimate.usage}`);
    console.log(`Quota: ${estimate.quota}`);
    console.log(`Percentage used: ${(estimate.usage / estimate.quota * 100).toFixed(2)}%`);
  } else {
    console.warn("Storage estimate API not supported.");
  }
}

getStorageEstimate();

            

              
                Copy
              
            
          

例: estimate.usageが10485760（10MB）を返し、estimate.quotaが1073741824（1GB）を返すとします。これは、アプリケーションが1GBのクォータのうち10MBを使用しており、利用可能なストレージの約1％であることを示しています。

クォータ値の解釈

quota値は、アプリケーションが*使用できる*ストレージの最大量を表します。ただし、このクォータが保証されているわけではないことを理解することが重要です。デバイスのストレージ容量が不足している場合、またはユーザーがブラウザのデータをクリアした場合、ブラウザはクォータを減らす可能性があります。したがって、アプリケーションは、利用可能なストレージが報告されたクォータよりも少ない状況に対処できるように設計する必要があります。

ベストプラクティス: ストレージの使用状況を監視し、アプリケーションがストレージ制限に近づいている場合は、ユーザーに積極的に通知するメカニズムを実装します。ユーザーが不要なデータをクリアしたり、ストレージプランをアップグレードしたりするためのオプションを提供します（該当する場合）。

永続的なストレージのリクエスト

アプリケーションに十分なストレージクォータがある場合でも、ブラウザはストレージに負荷がかかっている場合、アプリケーションのデータを自動的にクリアする可能性があります。これを防ぐには、navigator.storage.persist()メソッドを使用して永続的なストレージを要求できます。

            
async function requestPersistentStorage() {
  if (navigator.storage && navigator.storage.persist) {
    const isPersistent = await navigator.storage.persist();
    console.log(`Persistent storage granted: ${isPersistent}`);

    if (isPersistent) {
      console.log("Storage will not be cleared automatically.");
    } else {
      console.warn("Persistent storage not granted.");
      // Provide guidance to the user on how to enable persistent storage in their browser.
    }
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

requestPersistentStorage();

            

              
                Copy
              
            
          

persist()メソッドは、永続的なストレージの要求が許可されたかどうかを示すブール値を返します。ブラウザは、永続的なストレージを許可する前に、ユーザーに許可を求めるプロンプトを表示する場合があります。正確なプロンプトは、ブラウザとユーザーの設定によって異なります。

ユーザーインタラクションとアクセス許可

永続的なストレージを許可するというブラウザの決定は、次のようないくつかの要因に依存します。

• ユーザーエンゲージメント: ブラウザは、ユーザーが頻繁に使用するアプリケーションに永続的なストレージを許可する可能性が高くなります。
• ユーザー設定: ユーザーは、永続的なストレージ要求の処理方法を制御するようにブラウザの設定を構成できます。すべての要求を自動的に許可したり、すべての要求を拒否したり、各要求に対してプロンプトを表示したりすることができます。
• 利用可能なストレージ: デバイスのストレージが非常に少ない場合、ブラウザは、ユーザーエンゲージメントや設定に関係なく、永続的なストレージの要求を拒否する場合があります。
• オリジンの信頼: 安全なコンテキスト（HTTPS）は、通常、永続的なストレージに必要です。

重要: 永続的なストレージの要求が常に許可されるとは限りません。アプリケーションは、ストレージが永続的でない状況に対応できる必要があります。データをサーバーにバックアップしたり、データ損失を正常に処理したりするための戦略を実装します。

既存の永続性の確認

navigator.storage.persisted()メソッドを使用すると、アプリケーションにすでに永続的なストレージが許可されているかどうかを確認できます。

            
async function checkPersistentStorage() {
  if (navigator.storage && navigator.storage.persisted) {
    const isPersistent = await navigator.storage.persisted();
    console.log(`Persistent storage already granted: ${isPersistent}`);
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

checkPersistentStorage();

            

              
                Copy
              
            
          

ストレージテクノロジーとクォータ

• IndexedDB: 構造化されたデータをクライアント側で保存するための強力なNoSQLデータベース。IndexedDBはストレージクォータの制限を受け、永続的なストレージから大きな恩恵を受けることができます。
• Cache API: サービスワーカーがネットワークリクエストをキャッシュするために使用され、オフラインアクセスとパフォーマンスの向上を可能にします。Cache APIを介して作成されたキャッシュも、全体的なストレージクォータに貢献します。
• localStorage & sessionStorage: 少量​​のデータ用の単純なキーと値のストア。localStorageはデフォルトで永続的ですが（ユーザーがブラウザのデータをクリアしない限り）、サイズが制限されており、IndexedDBやCache APIほどPersistent Storage APIによって提供される永続性の保証の恩恵を受けません。ただし、それらの使用量は全体的なクォータにカウントされます。
• Cookie: 技術的にはストレージメカニズムですが、Cookieは通常、大量のデータを保存するのではなく、セッション管理と追跡に使用されます。Cookieには独自のサイズ制限があり、Storage APIによって管理されるストレージクォータとは異なります。

例: PWAはIndexedDBを使用してユーザープロファイルとオフラインデータを保存し、Cache APIを使用して画像やJavaScriptファイルなどの静的アセットをキャッシュします。永続的なストレージを要求すると、このキャッシュされたデータが削除される可能性が低くなり、一貫したオフラインエクスペリエンスが提供されます。

ストレージクォータ管理のベストプラクティス

効果的なストレージクォータ管理は、堅牢でユーザーフレンドリーなWebアプリケーションを構築するために不可欠です。従うべきいくつかのベストプラクティスを次に示します。

1. ストレージの使用状況を定期的に監視する

navigator.storage.estimate()を使用して、アプリケーションのストレージの使用状況を定期的に監視するメカニズムを実装します。これにより、潜在的なストレージの問題を事前に特定し、ユーザーエクスペリエンスに影響を与える前に是正措置を講じることができます。

2. ストレージ管理UIを実装する

ユーザーに、ストレージを管理するための明確で直感的なインターフェイスを提供します。このUIを使用すると、ユーザーは次のことができます。

• 現在のストレージの使用状況を表示する。
• 最もストレージを消費しているデータを特定する。
• 不要なデータを削除する（キャッシュされたファイル、ダウンロードされたコンテンツなど）。

例: 写真編集アプリケーションは、個々の写真やアルバムで使用されるストレージの内訳をユーザーに示すUIを提供し、不要になった写真を簡単に削除できるようにします。

3. データストレージを最適化する

アプリケーションのデータストレージを最適化して、ストレージフットプリントを最小限に抑えます。これには以下が含まれます。

• データを保存する前に圧縮する。
• 効率的なデータ形式（Protocol Buffers、MessagePackなど）を使用する。
• 冗長なデータの保存を避ける。
• 古いデータまたは未使用のデータを自動的に削除するデータ有効期限ポリシーを実装する。

4. グレースフルデグラデーション戦略を実装する

ストレージが制限されている場合、または永続的なストレージが許可されていない場合に、アプリケーションが正常に処理できるように設計します。これには、次のようなことが含まれる場合があります。

• 大量のストレージを必要とする特定の機能を無効にする。
• ユーザーに警告メッセージを表示する。
• データをサーバーにバックアップするオプションを提供する。

5. 永続的なストレージについてユーザーに知らせる

アプリケーションが永続的なストレージに大きく依存している場合は、永続的なストレージアクセス許可を付与することの利点についてユーザーに知らせてください。永続的なストレージがアプリケーションのパフォーマンスをどのように向上させ、データが自動的にクリアされないようにするかを説明します。

6. ストレージエラーを適切に処理する

アプリケーションがストレージクォータを超えた場合に発生する可能性のあるQuotaExceededErrorなどのストレージエラーを処理する準備をしてください。ユーザーに有益なエラーメッセージを提供し、可能な解決策（ストレージのクリア、ストレージプランのアップグレードなど）を提案します。

7. サービスワーカーの使用を検討する

サービスワーカーは、静的アセットとAPI応答をキャッシュすることで、Webアプリケーションのオフライン機能を大幅に強化できます。サービスワーカーを使用する場合は、ストレージクォータに注意し、キャッシュを効果的に管理するための戦略を実装します。

国際化に関する考慮事項

アプリケーションのストレージ管理UIを設計する際は、次の国際化（i18n）の側面を考慮してください。

• 数値形式: ストレージの使用状況の値を表示するときは、さまざまなロケールに適した数値形式を使用します。たとえば、一部のロケールでは、コンマが10進数の区切り文字として使用され、他のロケールではピリオドが使用されます。JavaScriptのtoLocaleString()メソッドを使用して、ユーザーのロケールに従って数値をフォーマットします。
• 日付と時刻の形式: アプリケーションが日付と時刻を保存する場合は、ストレージ管理UIに表示するときに、ユーザーのロケールに従ってフォーマットします。JavaScriptのtoLocaleDateString()メソッドとtoLocaleTimeString()メソッドを使用して、ロケールを認識した日付と時刻の形式設定を行います。
• 単位のローカライズ: さまざまな地域で使用されている規則に合わせて、ストレージユニット（KB、MB、GBなど）をローカライズすることを検討してください。標準ユニットは広く理解されていますが、ローカライズされた代替手段を提供することで、ユーザーエクスペリエンスを向上させることができます。
• テキストの方向: ストレージ管理UIが左から右（LTR）と右から左（RTL）の両方のテキスト方向をサポートしていることを確認します。CSSプロパティ（directionやunicode-bidiなど）を使用して、テキストの方向を正しく処理します。

セキュリティに関する考慮事項

永続的なストレージを扱う場合、セキュリティが最も重要です。次のセキュリティのベストプラクティスに従ってください。

• HTTPSを使用する: 常にHTTPSを介してアプリケーションを提供し、転送中のデータを保護し、中間者攻撃を防ぎます。HTTPSは、多くのブラウザで永続的なストレージの要件でもあります。
• ユーザー入力をサニタイズする: クロスサイトスクリプティング（XSS）の脆弱性を防ぐために、すべてのユーザー入力を保存する前にサニタイズします。
• 機密データを暗号化する: 承認されていないアクセスから保護するために、機密データをローカルに保存する前に暗号化します。暗号化にはWeb Crypto APIの使用を検討してください。
• 安全なデータ処理の実践を実装する: データリークを防ぎ、保存されたデータの整合性を確保するために、安全なコーディングの実践に従ってください。
• コードを定期的に確認および更新する: 最新のセキュリティ脅威と脆弱性に関する最新情報を入手し、コードを定期的に確認および更新して、それらに対処してください。

さまざまな地域での例

ストレージクォータの管理がさまざまな地域でどのように異なるかを考えてみましょう。

• 帯域幅が制限されている地域: インターネット帯域幅が制限されている、または高価な地域では、ユーザーはオフラインアクセスとキャッシュに依存している可能性があります。したがって、アプリケーションは効率的なストレージ使用を優先し、キャッシュされたデータの管理に関する明確なガイダンスを提供する必要があります。たとえば、アフリカや東南アジアの一部の地域では、データコストが大きな懸念事項です。
• データプライバシー規制がある地域: 欧州連合（GDPR）など、厳格なデータプライバシー規制がある地域では、アプリケーションはストレージの使用方法について透明性を保ち、個人データを保存する前にユーザーから明示的な同意を得る必要があります。また、ユーザーにデータへのアクセス、修正、削除の機能を提供する必要があります。
• 古いデバイスがある地域: ユーザーが古いデバイスやあまり強力でないデバイスを使用する可能性が高い地域では、アプリケーションはストレージの使用に特に注意し、デバイスのパフォーマンスへの影響を最小限に抑えるためにデータストレージを最適化する必要があります。
• 特定の言語要件がある地域: ストレージ管理UIは、数値形式（10進数の区切り文字にコンマまたはピリオドを使用するなど）、日付/時刻形式、および適切なテキスト方向を考慮して、完全にローカライズする必要があります。

例: インドのユーザーを対象としたニュースアプリケーションでは、断続的なインターネット接続の可能性を認識して、ユーザーがオフラインで記事をダウンロードできるようにする場合があります。また、アプリケーションは、複数のインド言語で明確なストレージ管理UIを提供し、ユーザーがダウンロードした記事を簡単に削除してスペースを解放できるようにします。

ストレージAPIの将来

Persistent Storage APIは常に進化しており、最新のWebアプリケーションの増大する要求に対応するために、新しい機能が追加されています。将来の開発の可能性には、次のようなものがあります。

• ストレージクォータ管理の改善: ストレージクォータに対するよりきめ細かい制御。アプリケーションは、さまざまな種類のデータに特定の量のストレージを割り当てることができます。
• クラウドストレージとの統合: クラウドストレージサービスとのシームレスな統合。アプリケーションは、ローカルストレージが制限されている場合に、データをクラウドに透過的に保存できます。
• 高度なデータ同期: より洗練されたデータ同期メカニズム。アプリケーションは、ローカルストレージとクラウド間でデータを効率的に同期できます。
• 標準化されたストレージ暗号化: ローカルストレージに保存されたデータを暗号化するための標準化されたAPI。機密データを保護するプロセスを簡素化します。

結論

Persistent Storage APIは、リッチなオフラインエクスペリエンスを提供できる、堅牢でユーザーフレンドリーなWebアプリケーションを構築したいWeb開発者にとって強力なツールです。ストレージクォータの管理を理解し、永続的なストレージを要求し、データストレージとセキュリティに関するベストプラクティスに従うことで、信頼性が高く、パフォーマンスが高く、ユーザーのプライバシーを尊重するアプリケーションを作成できます。Webが進化し続けるにつれて、Persistent Storage APIは、次世代のWebアプリケーションを実現する上でますます重要な役割を果たすでしょう。

参考文献

• MDN Web Docs: Storage API
• web.dev: Storage for the web
• WICG: Storage Quota API