永続ストレージ

永続ストレージは、重要なデータを削除から保護し、データ損失の可能性を減らすのに役立ちます。

Pete LePage

ディスク容量の不足などのストレージの圧迫に直面すると、ブラウザは通常、最も長い間使用されていないオリジンから、Cache API や IndexedDB などのデータを削除します。アプリがサーバーとデータを同期していない場合、データが失われる可能性があります。また、アプリの動作に必要なリソースが削除されるため、アプリの信頼性が低下する可能性があります。どちらの場合も、ユーザー エクスペリエンスが低下します。

幸いなことに、Chrome チームの調査によると、Chrome によってデータが自動的に消去されることはほとんどありません。ユーザーが手動でストレージをクリアする方がはるかに一般的です。したがって、ユーザーがサイトを定期的に訪問している場合、データが削除される可能性は低くなります。ブラウザによるデータの削除を防ぐには、サイト全体のストレージを永続ストレージとしてマークするようリクエストします。

永続ストレージは、多くの最新のブラウザでサポートされています。

削除、保存できる容量、割り当て制限の処理方法について詳しくは、ウェブのストレージをご覧ください。

サイトのストレージが永続としてマークされているかどうかを確認する

JavaScript を使用して、サイトのストレージが永続としてマークされているかどうかを判断できます。navigator.storage.persisted() を呼び出すと、ストレージが永続化されたかどうかを示すブール値で解決される Promise が返されます。

// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persisted();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

永続ストレージをリクエストするタイミング

ストレージを永続としてマークするようリクエストする最適なタイミングは、重要なユーザーデータを保存するときです。リクエストは、ユーザー操作にラップするのが理想的です。ページ読み込み時や他のブートストラップ コードで永続ストレージをリクエストしないでください。ブラウザでユーザーに権限を求めるメッセージが表示される可能性があります。ユーザーが保存する必要があると思われる操作を行っていない場合、プロンプトがわかりにくく、リクエストが拒否される可能性があります。また、プロンプトを頻繁に表示しないようにしてください。ユーザーが権限を付与しないことを選択した場合は、次の保存時にすぐに再度プロンプトを表示しないでください。

永続ストレージをリクエストする

サイトのデータの永続ストレージをリクエストするには、navigator.storage.persist() を呼び出します。永続ストレージの権限が付与されたかどうかを示すブール値で解決される Promise を返します。

// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persist();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

権限はどのように付与されますか？

永続ストレージは権限として扱われます。ブラウザは、さまざまな要素を使用して、永続ストレージの権限を付与するかどうかを決定します。

Chrome およびその他の Chromium ベースのブラウザ

Chrome や他のほとんどの Chromium ベースのブラウザでは、権限のリクエストが自動的に処理され、ユーザーにプロンプトが表示されることはありません。代わりに、サイトが重要と見なされる場合は永続ストレージの権限が自動的に付与され、そうでない場合は暗黙的に拒否されます。

サイトが重要かどうかを判断するヒューリスティックには、次のようなものがあります。

• サイトのエンゲージメント レベルはどの程度ですか？
• サイトはインストールまたはブックマークされていますか？
• サイトに通知の表示を許可する権限が付与されていますか？

リクエストが拒否された場合は、後で再度リクエストできます。その際、同じヒューリスティックを使用して評価されます。

Firefox

Firefox は、権限のリクエストをユーザーに委任します。永続ストレージがリクエストされると、サイトが永続ストレージにデータを保存することを許可するかどうかをユーザーに尋ねる UI ポップアップが表示されます。

永続ストレージで保護されるストレージ

永続ストレージの権限が付与されている場合、ブラウザは次の場所に保存されているデータを削除しません。

• Cache API
• クッキー
• DOM ストレージ（ローカル ストレージ）
• File System API（ブラウザ提供のサンドボックス化されたファイル システム）
• IndexedDB
• Service Worker
• アプリ キャッシュ（非推奨、使用しないでください）
• WebSQL（非推奨、使用しないでください）

永続ストレージをオフにする方法

現時点では、永続ストレージが不要になったことをブラウザにプログラムで伝える方法はありません。

まとめ

Chrome チームの調査によると、保存されたデータが Chrome によって自動的に消去されることはほとんどありません。クラウドに保存されていない、または重大なデータ損失につながる可能性のある重要なデータを保護するために、永続ストレージは、ローカル デバイスがストレージ不足に直面したときにブラウザによってデータが削除されないようにするのに役立つツールです。また、永続ストレージをリクエストするのは、ユーザーがそれを必要とする可能性が最も高い場合に限るようにしてください。

ありがとうございました

このドキュメントのレビューにご協力いただいた Victor Costan 氏と Joe Medley 氏に心より感謝いたします。このドキュメントの最初のバージョンを WebFundamentals に掲載した Chris Wilson に感謝します。