ドキュメントからアプリケーションへと移行するWebのニーズに応える、新たなAPIが現れた。 Pete Lepage氏はweb.dev LIBEで、開発者がクライアントデータの格納とキャッシュを行う際の選択肢について、短時間だが詳細な説明を行った。CacheStorage、StorageManagerその他のAPIが、ネイティブなモバイルアプリケーションに匹敵するオフライン機能とパフォーマンスを備えたアプリケーションの開発を支援する。
Lepage氏は講演の中で、3つの重要なトピックを取り上げて説明した。
完璧な無線環境の中にあっても、キャッシングなどのストレージ技術によって、パフォーマンスや信頼性、そして最も重要なものとして、ユーザエクスペリエンスを大幅に改善することは可能です。[…] クライアント上にデータを格納し、重要なアプリケーションデータをキャッシュするには、どのような方法を取るべきか？どの程度の量を格納できるのか？ブラウザは削除をどのように処理しているのか？Web上のストレージについて、詳しくみていきましょう。
最初にLepage氏は、かなり具体的かつ限定的なスコープの中から、適切なストレージメカニズムをいくつか列挙し、それらが重大なパフォーマンス上の問題を引き起こす可能性のあることを示した。
SessionStorageはブラウザタブのライフタイムを対象とするもので、メインスレッドをブロックし、5MB程度の文字列に制限されている。セッション固有の小規模な情報を格納するためには便利だが、Webやサービスワーカといった、タブの外部から参照することはできない。
LocalStorageとCookieも同じく同期的でブロックを伴い、同じようなスコープやフォーマットの制限がある。Lepage氏はまた、クッキーをストレージ目的で使用するべきではない、とも強く主張した。クッキーの情報はHTTP要求とともに転送されるため、サイズの大きなクッキーはWebリクエストの肥大につながるからだ。その他のテクノロジは廃止されていたり、現在はメンテナンスされていない状態にある(WebSQL、Application Cache)。
規模の大きな構造的データ(ユーザドキュメントや設定情報など)の格納やキャッシュには、Cache Storage API、IndexedDB、場合によってはStorageManagerAPIが利用できる。IndexedDBとCache Storage APIはすべての最新のブラウザでサポートされており、非同期に動作し、ブラウザのwindowからWebワーカやサービスワーカによってアクセスすることが可能である。
ブラウザに格納可能な最大データ容量を決定するポリシは、ブラウザベンダによってさまざまだ。使用可能なディスク容量の比率によって制限するブラウザ(ChromeとFirefoxでは50パーセント)や、ユーザの明示的な同意によって拡張可能なハードリミットを設けているブラウザ(Safariでは1GB)がある。
StorageManager APIのestimateメソッドを使用すれば、次のように、使用可能なストレージ容量を判断することができる。
if (navigator.storage && navigator.storage.estimate) {
const quota = await navigator.storage.estimate();
// quota.usage -> Number of bytes used.
// quota.quota -> Maximum number of bytes available.
const percentageUsed = (quota.usage / quota.quota) * 100;
console.log(`You've used ${percentageUsed}% of the available storage.`);
const remaining = quota.quota - quota.usage;
console.log(`You can write up to ${remaining} more bytes.`);}
StorageManager APIはSafariでは使用できないため、使用する前に機能の有無を確認する(feature-detect)必要がある。使用可能な場合でも、アプリケーションの信頼性を確保するために、ストレージクオータを超過した場合のエラー(QuotaExceededError)を明示的に処理することが必要だ。Cache APIに関して、Lepage氏は、次のようなサンプルコードを提供した。
try {
const cache = await caches.open('my-cache');
await cache.add(new Request('/sample1.jpg'));
} catch (err) {
if (error.name === 'QuotaExceededError') {
// Fallback code goes here
}
}
クオータ制限に達した場合、スペースを確保するために実施可能な方法としては、古いコンテンツの削除、大規模なコンテンツの削除、削除対象をユーザに判断してもらう、などがある。さらにLepage氏は、デバイスストレージが不足した場合など、(サイトが永続ストレージを要求していなければ)ブラウザ自身の判断でデータを廃棄する場合がある、という点に注意を促している。廃棄ポリシ(Eviction Policy)はブラウザベンダ毎に異なり、例えばSafariは先頃、Intelligent Tracking Preventionプログラムの一環として、新たにすべての書き込み可能ストレージに7日間という保管上限を実装した。他のブラウザはLRU手法などを使用している。ユーザがブラウザ設定でキャッシュをクリアすることも可能だ。
その他関連するオンラインリソースに関するチェックを開発者に促して、Lepage氏は講演を締め括った。オリジナルの講演はYouTubeでオンライン公開されており、短いタイムフレームの中に多数の技術的詳細とイラストレーションが詰め込まれている。
web.dev LIVEはGoogleの主催により、Web開発の現状を取り上げる3日間のオンラインコミュニティイベントである。2020年のイベントは6月末に実施され、録画されたセッションはすべて公開済である。