永続的ストレージ

永続ストレージは、重要なデータをエビクションから保護し、データ損失のリスクを減らすのに役立ちます。

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

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

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

対応ブラウザ

  • 55
  • 79
  • 57
  • 15.2

ソース

エビクション、保存できる容量、割り当て制限の処理方法については、ウェブ用のストレージをご覧ください。

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

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 ポップアップをユーザーに表示します。

サイトが永続ストレージをリクエストしたときに Firefox に表示されるポップアップです。
サイトが永続ストレージをリクエストしたときに Firefox に表示されるポップアップです。

永続ストレージによって保護されるストレージはどれですか。

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

  • キャッシュ API
  • クッキー
  • DOM ストレージ(ローカル ストレージ)
  • File System API(ブラウザ提供およびサンドボックス化されたファイル システム)
  • IndexedDB
  • Service Worker
  • App Cache(非推奨。使用しないでください)
  • WebSQL(非推奨。使用しないでください)

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

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

まとめ

Chrome チームの調査によると、保存されているデータが Chrome で自動的に消去されることはまれです。クラウドに保存されない可能性のある重要なデータ、またはデータに大きな損失をもたらす重要なデータを保護するために、永続ストレージは、ローカル デバイスでストレージの負荷がかかったときに、ブラウザによってデータが削除されないようにする便利なツールです。永続ストレージをリクエストするのは、ユーザーにとって最も可能性が高い場合にのみ行うようにしてください。

ありがとう

この記事をレビューしてくれた Victor Costan と Joe Medley に感謝します。 WebFundamentals に初めて掲載されたこの記事のオリジナル版を作成した Chris Wilson に感謝します。

ヒーロー画像(作成者: Umberto、Unsplash