JavaScript の Polymer フレームワークの動作オブジェクトに関する簡単な説明

この記事では、主に JavaScript の Polymer フレームワークの動作オブジェクトを紹介します。Polymer は、Google によって開発された Web UI 関連のフレームワークです。

localStorage はよく知られた名前です。しかし、ローカル ストレージ ファミリーにはそれ以上のものがあります。以前 sessionStorage について説明しましたが、魔法の CacheStorage も登場しました。 Response オブジェクトを保存するために使用されます。つまり、HTTP 応答をキャッシュするために使用されます。 localStorage でも実行できますが、おそらくより特殊です。

ブラウザ上の CacheStorage への参照は、ServiceWorker 仕様で定義されているキャメル ケースの cacheStorage ではなくキャッシュです。 CacheStorage は複数の Cache のコレクションであり、各 Cache は複数の Response オブジェクトを格納できます。

これ以上ナンセンスではありません。これがデモです

<script>
caches.delete(&#39;c1&#39;);
caches.delete(&#39;c2&#39;);
Promise.all([
 caches.open(&#39;c1&#39;).then(function(cache) {
  return cache.put(&#39;/hehe&#39;, new Response(&#39;aaa&#39;, { status: 200 }));
 }),
 caches.open(&#39;c2&#39;).then(function(cache) {
  return cache.put(&#39;/hehe&#39;, new Response(&#39;bbb&#39;, { status: 200 }));
 })
]).then(function() {
 return caches.match(&#39;/hehe&#39;);
}).then(function(response) {
 return response.text();
}).then(function(body) {
 console.log(body);
});
</script>

まず、キャッシュの open メソッドを呼び出して、Cache オブジェクトへの参照を非同期的に取得します。このオブジェクトでは、Response オブジェクト (パラメーターは URL と Response オブジェクト) を配置し、match メソッドを使用してそれを取得できます (URL を渡し、対応する Response オブジェクトを取得します)。

match メソッドは Cache だけでなく CacheStorage でも呼び出すことができます。たとえば、上記の例では 2 つの Cache を開き、/hehe という URL を書き込みます。書き込み操作が完了すると、/hehe と一致するように外部 CacheStorage で match メソッドが呼び出されます。結果はランダムです (このルールが定義されている場所が見つかりません)。

上記の例では Cache オブジェクトにデータを 1 つだけ配置しますが、Cache オブジェクト自体はさらに多くの URL/Response ペアを格納できます。また、削除 (ユーザーの削除) やキー (トラバーサル用) などのメソッドを提供します。ただし、Cache には localStorage のような明確なメソッドがありません。キャッシュをクリアする必要がある場合は、CacheStorage 上のキャッシュ全体を直接削除して再度開くことができます。

この API は ServiceWorker と同じです。通常は ServiceWorker で使用され、全体の設計スタイルも ServiceWorker と同様に Promise に基づいています。

上記はこの章の全内容です。その他の関連チュートリアルについては、JavaScript ビデオ チュートリアル をご覧ください。