永続ストレージは、重要なデータをエビクションから保護し、データ損失のリスクを低減するのに役立ちます。
ディスク容量が少ないなど、ストレージの負荷が大きくなると、ブラウザは通常、最も長く使用されていない送信元から 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 ポップアップが表示されます。
永続ストレージによって保護されるストレージはどれですか。
永続ストレージの権限が付与されている場合、ブラウザは以下に保存されているデータを削除しません。
- キャッシュ API
- クッキー
- DOM ストレージ（ローカル ストレージ）
- File System API（ブラウザが提供する、サンドボックス化されたファイル システム）
- IndexedDB
- Service Worker
- アプリのキャッシュ（非推奨。使用しないでください）
- WebSQL（非推奨。使用しないでください）
永続ストレージを無効にする方法
現時点では、永続ストレージが不要になったことをブラウザに通知する方法はありません。
おわりに
Chrome チームの調査によると、保存されたデータが Chrome で自動的に消去されることはまれです。クラウドに保存できない、またはデータの大幅な損失につながる重要なデータを保護するには、永続ストレージは、ローカル デバイスでストレージ負荷がかかったときに、ブラウザによってデータが削除されないようにするために役立ちます。また、ユーザーが最も必要としている場合にのみ永続ストレージをリクエストするようにしてください。
Thanks
この記事をレビューしてくれた Victor Costan、Joe Medley に心より感謝します。 WebFundamentals に最初に掲載されたこの記事のオリジナル版を執筆した Chris Wilson に感謝します。
ヒーロー画像（Umberto）（Unsplash より）