BT

InfoQ ホームページ ニュース Web Storage API - Google Web.DevでのPete Lepage氏の講演より

Web Storage API - Google Web.DevでのPete Lepage氏の講演より

ブックマーク

原文(投稿日:2020/09/11)へのリンク

ドキュメントからアプリケーションへと移行するWebのニーズに応える、新たなAPIが現れた。 Pete Lepage氏はweb.dev LIBEで、開発者がクライアントデータの格納とキャッシュを行う際の選択肢について、短時間だが詳細な説明を行った。CacheStorage、StorageManagerその他のAPIが、ネイティブなモバイルアプリケーションに匹敵するオフライン機能とパフォーマンスを備えたアプリケーションの開発を支援する。

Lepage氏は講演の中で、3つの重要なトピックを取り上げて説明した。

完璧な無線環境の中にあっても、キャッシングなどのストレージ技術によって、パフォーマンスや信頼性、そして最も重要なものとして、ユーザエクスペリエンスを大幅に改善することは可能です。[…] クライアント上にデータを格納し、重要なアプリケーションデータをキャッシュするには、どのような方法を取るべきか?どの程度の量を格納できるのか?ブラウザは削除をどのように処理しているのか?Web上のストレージについて、詳しくみていきましょう。

最初にLepage氏は、かなり具体的かつ限定的なスコープの中から、適切なストレージメカニズムをいくつか列挙し、それらが重大なパフォーマンス上の問題を引き起こす可能性のあることを示した。

SessionStorageはブラウザタブのライフタイムを対象とするもので、メインスレッドをブロックし、5MB程度の文字列に制限されている。セッション固有の小規模な情報を格納するためには便利だが、Webやサービスワーカといった、タブの外部から参照することはできない。

LocalStorageCookieも同じく同期的でブロックを伴い、同じようなスコープやフォーマットの制限がある。Lepage氏はまた、クッキーをストレージ目的で使用するべきではない、とも強く主張した。クッキーの情報はHTTP要求とともに転送されるため、サイズの大きなクッキーはWebリクエストの肥大につながるからだ。その他のテクノロジは廃止されていたり、現在はメンテナンスされていない状態にある(WebSQLApplication Cache)。

規模の大きな構造的データ(ユーザドキュメントや設定情報など)の格納やキャッシュには、Cache Storage APIIndexedDB、場合によっては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月末に実施され、録画されたセッションはすべて公開済である。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。