initial commit

8 files changed, 906 insertions, 0 deletions

diff --git a/files/ja/web/api/cache/add/index.html b/files/ja/web/api/cache/add/index.html
new file mode 100644
index 0000000000..7d12b60afd
--- /dev/null
+++ b/files/ja/web/api/cache/add/index.html
@@ -0,0 +1,116 @@
+---
+title: Cache.add()
+slug: Web/API/Cache/add
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+translation_of: Web/API/Cache/add
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Cache")}} インターフェイスの <strong><code>add()</code></strong> メソッドは、URL を受け取り、取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。</span> <code>add()</code> メソッドは、機能的に次の例と同じです。</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<p>より複雑な操作では、 {{domxref("Cache.put","Cache.put()")}} を直接使用する必要があります。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>add()</code> は、リクエストにマッチする、前にキャッシュに保存されたキー/値の組を上書きます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() {
+  // リクエストはすでに cahce に追加されている。
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>キャッシュに加えるリクエスト。 {{domxref("Request")}} オブジェクトか URL を指定できる。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code>undefined</code> で解決する {{jsxref("Promise")}}。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>例外</strong></th>
+   <th scope="col"><strong>発生条件</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>URL スキームが <code>http</code> や <code>https</code> ではありません。</p>
+
+    <p>レスポンスステータスが200番台（つまり、成功レスポンス）ではありません。これはリクエストが成功を返さない場合や、リクエストがオリジン間の CORS ではないリクエスト (<em>cross-origin no-cors</em> request) の場合も発生します (この場合、ステータスが常に 0 で報告されます)。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードブロックは、{{domxref("InstallEvent")}} が発火するのを待ってから、アプリにインストールプロセスを処理するために、{{domxref("ExtendableEvent.waitUntil","waitUntil")}} を実行します。この処理は、新しい cache を作成するための {{domxref("CacheStorage.open")}} の呼び出しと、資産を追加するための {{domxref("Cache.add")}} の使用で構成されています。</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様策定状況</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.Cache.add")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカーの使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cache/addall/index.html b/files/ja/web/api/cache/addall/index.html
new file mode 100644
index 0000000000..1e4ed442da
--- /dev/null
+++ b/files/ja/web/api/cache/addall/index.html
@@ -0,0 +1,116 @@
+---
+title: Cache.addAll()
+slug: Web/API/Cache/addAll
+tags:
+  - API
+  - Cache
+  - addAll
+  - サービスワーカー
+  - サービスワーカー API
+translation_of: Web/API/Cache/addAll
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Cache")}} インターフェイスの <strong><code>addAll()</code></strong> メソッドは、URL の配列を受け取り、取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。取得の間に作成されたリクエストオブジェクトは、格納されるレスポンス操作のキーになります。</span></p>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>addAll()</code> は、リクエストと一致する、以前にキャッシュに格納されたキーと値のペアをどれでも上書きしますが、（結果としての <code>put()</code> 操作が）同一の <code>addAll()</code> メソッドによって先に格納されたキャッシュエントリーを上書きしようとすると失敗します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>cache</em>.addAll(<em>requests</em>[]).then(function() {
+  // リクエストはすでに cahce に追加されている。
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt>requests</dt>
+ <dd>キャッシュにフェッチして追加したい URL の文字列の配列です。 URL の代わりに {{domxref("Request")}} オブジェクトを指定できます。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code>undefined</code> で解決する {{jsxref("Promise")}}。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>例外</strong></th>
+   <th scope="col"><strong>発生条件</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>URL スキームが <code>http</code> や <code>https</code> ではありません。</p>
+
+    <p>レスポンスステータスが200番台（つまり、成功レスポンス）ではありません。これはリクエストが成功を返さない場合や、リクエストがオリジン間の CORS ではないリクエスト (<em>cross-origin no-cors</em> request) の場合も発生します (この場合、ステータスが常に 0 で報告されます)。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードブロックは、{{domxref("InstallEvent")}} が発火するのを待ってから、アプリのインストールプロセスを処理するために、{{domxref("ExtendableEvent.waitUntil","waitUntil")}} を実行します。この処理は、新しいキャッシュを作成するための {{domxref("CacheStorage.open")}} の呼び出しと、一連の資産を追加するための <code>addAll()</code> の使用で構成されています。</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様策定状況</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.Cache.addAll")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカーの使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cache/delete/index.html b/files/ja/web/api/cache/delete/index.html
new file mode 100644
index 0000000000..0390ae90d9
--- /dev/null
+++ b/files/ja/web/api/cache/delete/index.html
@@ -0,0 +1,84 @@
+---
+title: Cache.delete()
+slug: Web/API/Cache/delete
+tags:
+  - API
+  - Cache
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - delete
+translation_of: Web/API/Cache/delete
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Cache")}} インターフェイスの <strong><code>delete()</code></strong> メソッドは、キーがリクエストである {{domxref("Cache")}} エントリを探し、見つかった場合は {{domxref("Cache")}} エントリを削除して、<code>true</code> に解決される {{jsxref("Promise")}} を返します。 {{domxref("Cache")}} エントリが見つからない場合は、<code>false</code> に解決されます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>cache</em>.delete(<em>request</em>, {<em>options</em>}).then(function(<em>found</em>) {
+  // キャッシュエントリが見つかった場合は削除されました
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>削除しようとしている {{domxref("Request")}}。 これは、<code>Request</code> オブジェクトまたは URL です。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>プロパティが <code>delete</code> 操作でどのように照合するかを制御するオブジェクト。 使用可能なオプションは次のとおりです。
+ <ul>
+  <li><code>ignoreSearch</code>: 照合操作で URL のクエリ文字列を無視するかどうかを指定する {{jsxref("Boolean")}}。 <code>true</code> に設定すると、<code>http://foo.com/?value=bar</code> の <code>?value=bar</code> 部分を、照合の実行時に無視します。 デフォルトは <code>false</code> です。</li>
+  <li><code>ignoreMethod</code>: <code>true</code> に設定すると、照合操作が {{domxref("Request")}} <code>HTTP</code> メソッドを検証しないようにする {{jsxref("Boolean")}}（通常、<code>GET</code> および <code>HEAD</code> のみが許可されます）。 デフォルトは <code>false</code> です。</li>
+  <li><code>ignoreVary</code>: <code>true</code> に設定すると、<code>VARY</code> ヘッダーを照合しないように照合操作に指示する {{jsxref("Boolean")}}。 つまり、URL が一致した場合は、{{domxref("Response")}} オブジェクトに <code>VARY</code> ヘッダーがあるかどうかに関係なく一致します。 デフォルトは <code>false</code> です。</li>
+  <li><code>cacheName</code>: 検索対象の特定のキャッシュを表す {{domxref("DOMString")}}。 このオプションは <code>Cache.delete()</code> によって無視されることに注意してください。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>キャッシュエントリが削除された場合は <code>true</code>、それ以外の場合は <code>false</code> に解決される {{jsxref("Promise")}}。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+    someUIUpdateFunction();
+  });
+})</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Cache.delete")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cache/index.html b/files/ja/web/api/cache/index.html
new file mode 100644
index 0000000000..e6b633aa4e
--- /dev/null
+++ b/files/ja/web/api/cache/index.html
@@ -0,0 +1,193 @@
+---
+title: Cache
+slug: Web/API/Cache
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Fraft
+  - Interface
+  - Offline
+  - Reference
+  - Service Worker
+  - ServiceWorker
+  - Storage
+  - インターフェイス
+  - オフライン
+  - サービスワーカー
+translation_of: Web/API/Cache
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary"><strong><code>Cache</code></strong> インターフェイスは、<code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code> / <code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code> オブジェクトのペアのためのストレージの仕組みを提供します。例えば、 {{domxref("ServiceWorker")}} のライフサイクルの一部としてこれらをキャッシュします。なお、 <code>Cache</code> インターフェイスは、ワーカーだけでなくウィンドウスコープにも公開されています。サービスワーカーの仕様書で定義されているものですが、必ずしもサービスワーカーとの組み合わせで使用する必要はありません。</span></p>
+
+<p>単一のオリジンが、複数の名前付き <code>Cache</code> オブジェクトを持つことができます。 (例えば {{domxref("ServiceWorker")}} の中などで) スクリプトがどのように <code>Cache</code> を更新するかを実装する必要があります。 <code>Cache</code> 内のアイテムは、明示的に要求しない限り更新されませんし、削除しない限り有効期限はありません。 {{domxref("CacheStorage.open", "CacheStorage.open()")}} を使用して特定の名前付き <code>Cache</code> オブジェクトを開き、それから任意の <code>Cache</code> のメソッドを呼び出して <code>Cache</code> を管理します。</p>
+
+<p>また、定期的にキャッシュエントリを一掃する必要があります。各ブラウザーは、指定されたオリジンが使用できるキャッシュストレージの総量に厳しい制限を設けています。キャッシュ容量の概算の使用量は {{domxref("StorageEstimate")}} API を用いて確認することができます。ブラウザーはディスク容量の管理に最善を尽くしますが、あるオリジンのキャッシュストレージを削除することがあります。ブラウザーはふつう、あるオリジンのデータをすべて削除するか、まったく削除しないかのいずれかです。名前を用いてキャッシュをバージョン管理し、安全に操作できるスクリプトのバージョンからのみキャッシュを使用するようにしてください。詳細は、<a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">古いキャッシュの削除</a>を確認してください。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: キーの照合アルゴリズムは、値の中にある <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">VARY ヘッダー</a>に依存しています。そのため、新しいキーを照合するには、キャッシュ内のエントリのキーと値の両方を調べる必要があります。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ</strong>: キャッシュ API は HTTP のキャッシュヘッダーを尊重しません。</p>
+</div>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
+ <dd><code>Cache</code> オブジェクトで最初に一致したリクエストに関連するレスポンスで解決する {{jsxref("Promise")}} を返します。</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
+ <dd><code>Cache</code> オブジェクトで一致するすべてのリクエストの配列で解決する {{jsxref("Promise")}} を返します。</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
+ <dd>URL を受け取り、それを取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。機能的には <code>fetch()</code> を呼び出してから、 <code>put()</code> を使用してキャッシュに結果を追加するのと同等です。</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
+ <dd>URL の配列を受け取り、それらを取得して指定されたキャッシュに結果のレスポンスオブジェクトを追加します。</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
+ <dd>リクエストとそのレスポンスの両方を受け取り、指定されたキャッシュへ追加します。</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
+ <dd>キーがリクエストである <code>Cache</code> エントリを探し、見つかった場合は {{domxref("Cache")}} エントリを削除して、 <code>true</code> で解決する {{jsxref("Promise")}} を返します。 {{domxref("Cache")}} エントリが見つからない場合、Promise は <code>false</code> で解決します。</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
+ <dd><code>Cache</code> キーの配列で解決する {{jsxref("Promise")}} を返します。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードスニペットは、<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service worker selective caching sample</a> からのものです (<a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching をライブで</a>見る)。このコードでは {{domxref("CacheStorage.open()")}} を使用して、 <code>font/</code> で始まる <code>Content-Type</code> ヘッダー用の <code>Cache</code> オブジェクトを開きます。</p>
+
+<p>そしてこのコードは、 {{domxref("Cache.match()")}} を使用してすでにキャッシュ内に一致するフォントがあるかどうかを確認し、もしあれば、それを返します。一致するフォントがなかった場合は、コードはネットワークからフォントを取得して、 {{domxref("Cache.put()")}} を用いて取得したリソースをキャッシュします。</p>
+
+<p>このコードは {{domxref("Globalfetch.fetch","fetch()")}} の操作で発生する例外を処理します。なお、 HTTP のエラーレスポンス (404 など) はこの例外を発生させません。適切なエラーコードを持つ通常のレスポンスオブジェクトを返します。</p>
+
+<p>このコードスニペットでは、サービスワーカーで使用されるバージョン付きキャッシュのベストプラクティスも示しています。この例ではキャッシュが1つしかありませんが、キャッシュが複数でも同じアプローチが利用できます。これはキャッシュの一括指定識別子を、具体的なバージョン付けされたキャッシュ名に対応させます。このコードはまた、 <code>CURRENT_CACHES</code> で名前が指定されていないキャッシュをすべて削除します。</p>
+
+<p>このコード例において、 <code>caches</code> は {{domxref("ServiceWorkerGlobalScope")}} のプロパティです。これは <code>CacheStorage</code> オブジェクトを保持し、 {{domxref("CacheStorage")}} インターフェイスでアクセスすることができます。これは {{domxref("WindowOrWorkerGlobalScope")}} ミックスインを実装したものです。</p>
+
+<div class="note"><strong>メモ</strong>: Chrome では、 <code>chrome://inspect/#service-workers</code> にアクセスして、登録されたサービスワーカーの下の "inspect" リンクをクリックすると、 <code><a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a></code> スクリプトが行う様々なアクションのログ状態を見ることができます。</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  // CURRENT_CACHES で指定されていないすべてのキャッシュを削除します。
+  // この例ではキャッシュは1つしかありませんが、同じロジックが
+  // 複数のバージョン化されたキャッシュがある場合を処理します。
+  var expectedCacheNamesSet = new Set(Object.values(CURRENT_CACHES));
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (!expectedCacheNamesSet.has(cacheName)) {
+            // このキャッシュ名が「予期される」キャッシュ名のセットに存在しない場合は、削除します。
+            console.log('Deleting out of date cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+    caches.open(CURRENT_CACHES.font).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          // event.request のエントリがキャッシュにある場合、レスポンスが定義され、それを返すことができます。
+          // この例では、フォントリソースのみがキャッシュされることに注意してください。
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+
+        // それ以外の場合、event.request のエントリがキャッシュにない場合、
+        // レスポンスは undefined となり、リソースを fetch() する必要があります。
+        console.log(' No response for %s found in cache. About to fetch ' +
+          'from network...', event.request.url);
+
+        // 後で cache.put() の呼び出しで使用する可能性があるため、リクエストで .clone() を呼び出します。
+        // fetch() とcache.put() の両方がリクエストを「消費」するため、コピーを作成する必要があります。
+        // （https://fetch.spec.whatwg.org/#dom-request-clone を参照）
+        return fetch(event.request.clone()).then(function(response) {
+          console.log('  Response for %s from network is: %O',
+            event.request.url, response);
+
+          if (response.status &lt; 400 &amp;&amp;
+              response.headers.has('content-type') &amp;&amp;
+              response.headers.get('content-type').match(/^font\//i)) {
+            // これにより、エラーであることがわかっているレスポンス（つまり、HTTP ステータスコード 4xx または 5xx）のキャッシュが回避されます。
+            // また、フォントに対応するレスポンスのみをキャッシュする必要があります。
+            // つまり、"font/" で始まる Content-Type レスポンスヘッダーを持ちます。
+            // 不透明なフィルタされたレスポンス（https://fetch.spec.whatwg.org/#concept-filtered-response-opaque）の場合、
+            // レスポンスヘッダーにアクセスできないので、このチェックは常に失敗し、フォントはキャッシュされないことに注意してください。
+            // すべての Google Web Fonts は CORS をサポートするドメインから提供されるため、ここでは問題になりません。
+            // ただし、CORS をサポートしていないクロスオリジンドメインから他のリソースをキャッシュしようとしている場合は、注意が必要です。
+            // レスポンスで .clone() を呼び出して、そのコピーをキャッシュに保存します。
+            // そうすることで、制御されたページに戻る元のレスポンスオブジェクトを保持できます。
+            // （https://fetch.spec.whatwg.org/#dom-response-clone を参照）
+            console.log('  Caching the response to', event.request.url);
+            cache.put(event.request, response.clone());
+          } else {
+            console.log('  Not caching the response to', event.request.url);
+          }
+
+          // 元のレスポンスオブジェクトを返します。これは、リソース要求を満たすために使用されます。
+          return response;
+        });
+      }).catch(function(error) {
+        // この catch() は、match() または fetch() 操作から発生する例外を処理します。
+        // HTTP エラーレスポンス（404 など）は例外をトリガーしないことに注意してください。
+        // 適切なエラーコードが設定された通常のレスポンスオブジェクトを返します。
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h3 id="Storing_cookies_in_Caches" name="Storing_cookies_in_Caches">クッキーのキャッシュへの格納</h3>
+
+<p><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> では {{httpheader("Set-Cookie")}} ヘッダーを、 {{domxref("Response")}} オブジェクトを {{domxref("WindowOrWorkerGlobalScope", "fetch()")}} から返す前に削除する必要があります。したがって、キャッシュに含まれる <code>Response</code> はヘッダーを含みません。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.Cache")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカーの使用</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>（英語）</li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか？</a>（英語）</li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">ウェブワーカーの使用</a></li>
+</ul>
diff --git a/files/ja/web/api/cache/keys/index.html b/files/ja/web/api/cache/keys/index.html
new file mode 100644
index 0000000000..4dc981c901
--- /dev/null
+++ b/files/ja/web/api/cache/keys/index.html
@@ -0,0 +1,92 @@
+---
+title: Cache.keys()
+slug: Web/API/Cache/keys
+tags:
+  - API
+  - Cache
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - keys
+translation_of: Web/API/Cache/keys
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Cache")}} インターフェイスの <strong><code>keys()</code></strong> メソッドは、{{domxref("Cache")}} キーの配列に解決される {{jsxref("Promise")}} を返します。</span></p>
+
+<p>リクエストは、挿入されたのと同じ順序で返されます。</p>
+
+<div class="note">
+<p><strong>注</strong>: レスポンスに <code>VARY</code> ヘッダーが設定されている場合、URL が重複しているがヘッダーが異なるリクエストを返すことができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>cache</em>.keys(<em>request</em>, {<em>options</em>}).then(function(<em>keys</em>) {
+  // リクエストの配列で何かをする
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>request {{optional_inline}}</dt>
+ <dd>特定のキーが必要な場合、返してほしい {{domxref("Request")}}。 これは、<code>Request</code> オブジェクトまたは URL です。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>プロパティが <code>keys</code> 操作でどのように照合するかを制御するオブジェクト。 使用可能なオプションは次のとおりです。
+ <ul>
+  <li><code>ignoreSearch</code>: 照合操作で URL のクエリ文字列を無視するかどうかを指定する {{jsxref("Boolean")}}。 <code>true</code> に設定すると、<code>http://foo.com/?value=bar</code> の <code>?value=bar</code> 部分を、照合の実行時に無視します。 デフォルトは <code>false</code> です。</li>
+  <li><code>ignoreMethod</code>: <code>true</code> に設定すると、照合操作が {{domxref("Request")}} <code>HTTP</code> メソッドを検証しないようにする {{jsxref("Boolean")}}（通常、<code>GET</code> および <code>HEAD</code> のみが許可されます）。 デフォルトは <code>false</code> です。</li>
+  <li><code>ignoreVary</code>: <code>true</code> に設定すると、<code>VARY</code> ヘッダーを照合しないように照合操作に指示する {{jsxref("Boolean")}}。 つまり、URL が一致した場合は、{{domxref("Response")}} オブジェクトに <code>VARY</code> ヘッダーがあるかどうかに関係なく一致します。 デフォルトは <code>false</code> です。</li>
+  <li><code>cacheName</code>: 検索対象の特定のキャッシュを表す {{domxref("DOMString")}}。 このオプションは <code>Cache.keys()</code> によって無視されることに注意してください。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>{{domxref("Cache")}} キーの配列に解決される {{jsxref("Promise")}}。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.keys().then(function(keys) {
+    keys.forEach(function(request, index, array) {
+      cache.delete(request);
+    });
+  });
+})</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Cache.keys")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cache/match/index.html b/files/ja/web/api/cache/match/index.html
new file mode 100644
index 0000000000..755c14f2ce
--- /dev/null
+++ b/files/ja/web/api/cache/match/index.html
@@ -0,0 +1,102 @@
+---
+title: Cache.match()
+slug: Web/API/Cache/match
+tags:
+  - API
+  - Cache
+  - Method
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - match
+translation_of: Web/API/Cache/match
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Cache")}} インターフェイスの <strong><code>match()</code></strong> メソッドは、{{domxref("Cache")}} オブジェクトで最初に一致したリクエストに関連付けられた {{domxref("Response")}} に解決される {{jsxref("Promise")}} を返します。 一致が見つからない場合、{{jsxref("Promise")}} は {{jsxref("undefined")}} に解決されます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>cache</em>.match(<em>request</em>, {<em>options</em>}).then(function(<em>response</em>) {
+  // レスポンスで何かをします
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>{{domxref("Cache")}} 内でレスポンスを見つけようとしている {{domxref("Request")}}。 これは、{{domxref("Request")}} オブジェクトまたは URL です。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd><code>match</code> 操作のオプションを設定するオブジェクト。 使用可能なオプションは次のとおりです。
+ <ul>
+  <li><code>ignoreSearch</code>: URL のクエリ文字列を無視するかどうかを指定する {{jsxref("Boolean")}}。 例えば、<code>true</code> に設定すると、<code>http://foo.com/?value=bar</code> の <code>?value=bar</code> の部分は、照合の実行時に無視されます。 デフォルトは <code>false</code> です。</li>
+  <li><code>ignoreMethod</code>: <code>true</code> に設定すると、照合操作が {{domxref("Request")}} <code>HTTP</code> メソッドを検証しないようにする {{jsxref("Boolean")}}（通常、<code>GET</code> および <code>HEAD</code> のみが許可されます）。 デフォルトは <code>false</code> です。</li>
+  <li><code>ignoreVary</code>: <code>true</code> に設定すると、<code>VARY</code> ヘッダーの照合を実行しないように照合操作に指示する {{jsxref("Boolean")}}。 つまり、URL が一致する場合、{{domxref("Response")}} オブジェクトに <code>VARY</code> ヘッダーがあるかどうかに関係なく一致します。 デフォルトは <code>false</code> です。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>リクエストに一致する最初の {{domxref("Response")}} に解決する、または一致が見つからない場合は {{jsxref("undefined")}} に解決する {{jsxref("Promise")}}。</p>
+
+<div class="note">
+<p><code>注</code>: <code>Cache.match()</code> は、一致するすべてのレスポンスの配列で解決するのではなく、最初に一致するレスポンスのみ（つまり、<code><em>response</em>[0]</code>）で解決することを除いて、基本的に {{domxref("Cache.matchAll()")}} と同じです。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は、<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">カスタムオフラインページ</a>の例（<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">ライブデモ</a>）からの引用です。 リクエストが失敗した場合、キャッシュを使用して選択したデータを提供します。 <code>catch()</code> 句は、<code>fetch()</code> の呼び出しが例外をスローしたときにトリガーされます。 <code>catch()</code> 句の内部では、 <code>match()</code> を使用して正しいレスポンスを返します。</p>
+
+<p>この例では、GET HTTP 動詞で取得された HTML 文書のみがキャッシュされます。 <code>if()</code> 条件が false の場合、このフェッチハンドラーはリクエストをインターセプトしません。 他のフェッチハンドラーが登録されている場合、それらは <code>event.respondWith()</code> を呼び出す機会を得ます。 フェッチハンドラーが <code>event.respondWith()</code> を呼び出さない場合、リクエストはブラウザーによって処理され、サービスワーカーが関与していないかのように処理されます。 <code>fetch()</code> が 4xx または 5xx の範囲のレスポンスコードで有効な HTTP レスポンスを返す場合、<code>catch()</code> は呼び出されません。</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  // これが HTML 文書に対する GET リクエストである場合のみ、event.respondWith() を呼び出します。
+  if (event.request.method === 'GET' &amp;&amp;
+      event.request.headers.get('accept').indexOf('text/html') !== -1) {
+    console.log('フェッチイベントの処理: ', event.request.url);
+    event.respondWith(
+      fetch(event.request).catch(function(e) {
+        console.error('フェッチ失敗、代わりにオフラインページに戻ります。', e);
+        return caches.open(OFFLINE_CACHE).then(function(cache) {
+          return cache.match(OFFLINE_URL);
+        });
+      })
+    );
+  }
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Cache.match")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cache/matchall/index.html b/files/ja/web/api/cache/matchall/index.html
new file mode 100644
index 0000000000..efeb1cdc96
--- /dev/null
+++ b/files/ja/web/api/cache/matchall/index.html
@@ -0,0 +1,89 @@
+---
+title: Cache.matchAll()
+slug: Web/API/Cache/matchAll
+tags:
+  - API
+  - Cache
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - matchAll
+translation_of: Web/API/Cache/matchAll
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>{{domxref("Cache")}} インターフェイスの <strong><code>matchAll()</code></strong> メソッドは、{{domxref("Cache")}} オブジェクト内の一致するすべてのレスポンスの配列に解決される {{jsxref("Promise")}} を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>cache</em>.matchAll(<em>request</em>, {<em>options</em>}).then(function(<em>response</em>) {
+  // レスポンスの配列で何かをする
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>request {{optional_inline}}</dt>
+ <dd>{{domxref("Cache")}} 内でレスポンスを見つけようとしている {{domxref("Request")}}。 これは、<code>Request</code> オブジェクトまたは URL です。 この引数を省略すると、このキャッシュ内のすべてのレスポンスのコピーが取得されます。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>実行する照合の特定の制御オプションを設定できるオプションオブジェクト。 使用可能なオプションは次のとおりです。
+ <ul>
+  <li><code>ignoreSearch</code>: 照合操作で URL のクエリ文字列を無視するかどうかを指定する {{jsxref("Boolean")}}。 <code>true</code> に設定すると、<code>http://foo.com/?value=bar</code> の <code>?value=bar</code> 部分を、照合の実行時に無視します。 デフォルトは <code>false</code> です。</li>
+  <li><code>ignoreMethod</code>: <code>true</code> に設定すると、照合操作が {{domxref("Request")}} <code>HTTP</code> メソッドを検証しないようにする {{jsxref("Boolean")}}（通常、<code>GET</code> および <code>HEAD</code> のみが許可されます）。 デフォルトは <code>false</code> です。</li>
+  <li><code>ignoreVary</code>: <code>true</code> に設定すると、<code>VARY</code> ヘッダーの照合を実行しないように照合操作に指示する {{jsxref("Boolean")}}。 つまり、URL が一致する場合、{{domxref("Response")}} オブジェクトに <code>VARY</code> ヘッダーがあるかどうかに関係なく一致します。 デフォルトは <code>false</code> です。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>{{domxref("Cache")}} オブジェクト内のすべての一致するレスポンスの配列に解決される {{jsxref("Promise")}}。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("Cache.match()")}} は、一致するすべてのレスポンスの配列で解決するのではなく、最初に一致するレスポンスのみ（つまり、<code><em>response</em>[0]</code>）で解決することを除いて、基本的に <code>Cache.matchAll()</code> と同じです。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.matchAll('/images/').then(function(response) {
+    response.forEach(function(element, index, array) {
+      cache.delete(element);
+    });
+  });
+})</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Cache.matchAll")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cache/put/index.html b/files/ja/web/api/cache/put/index.html
new file mode 100644
index 0000000000..f32bd19ef2
--- /dev/null
+++ b/files/ja/web/api/cache/put/index.html
@@ -0,0 +1,114 @@
+---
+title: Cache.put()
+slug: Web/API/Cache/put
+tags:
+  - API
+  - Cache
+  - Method
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - put
+translation_of: Web/API/Cache/put
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Cache")}} インターフェイスの <strong><code>put()</code></strong> メソッドを使用すると、キーと値のペアを現在の {{domxref("Cache")}} オブジェクトに追加できます。</span></p>
+
+<p>多くの場合、1つ以上のリクエストを {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} して、その結果を直接キャッシュに追加したいだけです。 そのような場合、{{domxref("Cache.add","Cache.add()")}} や {{domxref("Cache.addAll","Cache.addAll()")}} を使用する方がよいでしょう。 これらは、1つ以上のそれらの操作の一括指定関数であるためです。</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})
+
+</pre>
+
+<div class="note">
+<p><strong>注</strong>: <code>put()</code> は、リクエストに一致する、以前にキャッシュに保存されたキーと値のペアを上書きします。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("Cache.add")}} や {{domxref("Cache.addAll")}} は、200 の範囲にない <code>Response.status</code> 値を持つレスポンスをキャッシュしませんが、{{domxref("Cache.put")}} では、リクエストとレスポンスのペアを格納できます。 その結果、{{domxref("Cache.put")}} では可能ですが、{{domxref("Cache.add")}} や {{domxref("Cache.addAll")}} は不透明なレスポンスを格納するために使用できません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>cache</em>.put(<em>request</em>, <em>response</em>).then(function() {
+  // リクエストとレスポンスのペアがキャッシュに追加されました
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>キャッシュに追加する {{domxref("Request")}} オブジェクトまたは URL。</dd>
+ <dt>response</dt>
+ <dd>リクエストと合う {{domxref("Response")}}。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p><code>undefined</code> で解決する {{jsxref("Promise")}}。</p>
+
+<div class="note">
+<p>注: URL スキームが <code>http</code> または <code>https</code> でない場合、Promise は <code>TypeError</code> で拒否します。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は、MDN の <a href="https://github.com/mdn/sw-test/">sw-test の例</a>からのものです（<a href="https://mdn.github.io/sw-test/">sw-test をライブで</a>見る）。 ここでは、{{domxref("FetchEvent")}} が発生するのを待ちます。 次のようなカスタムレスポンスを作成します。</p>
+
+<ol>
+ <li>{{domxref("CacheStorage.match","CacheStorage.match()")}} を使用して、リクエストの一致が {{domxref("CacheStorage")}} にあるかどうかを確認します。 もしそうなら、それを提供します。</li>
+ <li>そうでない場合は、<code>open()</code> を使用して <code>v1</code> キャッシュを開き、{{domxref("Cache.put","Cache.put()")}} を使用してデフォルトのネットワークリクエストをキャッシュに入れ、 <code>return response.clone()</code> を使用してデフォルトのネットワークリクエストのクローンを返します。 <code>put()</code> がレスポンスのボディを消費するため、クローンが必要です。</li>
+ <li>これが失敗した場合（ネットワークがダウンしているなど）、フォールバックレスポンスを返します。</li>
+</ol>
+
+<pre class="brush: js">var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.Cache.put")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>