initial commit

6 files changed, 660 insertions, 0 deletions

diff --git a/files/ja/web/api/cachestorage/delete/index.html b/files/ja/web/api/cachestorage/delete/index.html
new file mode 100644
index 0000000000..da3b6ea223
--- /dev/null
+++ b/files/ja/web/api/cachestorage/delete/index.html
@@ -0,0 +1,86 @@
+---
+title: CacheStorage.delete()
+slug: Web/API/CacheStorage/delete
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - delete
+translation_of: Web/API/CacheStorage/delete
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("CacheStorage")}} インターフェイスの <strong><code>delete()</code></strong> メソッドは、<code>cacheName</code> に一致する {{domxref("Cache")}} オブジェクトを見つけ、見つかった場合は {{domxref("Cache")}} オブジェクトを削除し、<code>true</code> に解決される {{jsxref("Promise")}} を返します。 {{domxref("Cache")}} オブジェクトが見つからない場合、<code>false</code> に解決されます。</span></p>
+
+<p>グローバルな {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} プロパティを介して <code>CacheStorage</code> にアクセスできます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">caches.delete(<em>cacheName</em>).then(function(<em>boolean</em>) {
+  // キャッシュが削除されました
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><code>cacheName</code></dt>
+ <dd>削除するキャッシュの名前。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>{{domxref("Cache")}} オブジェクトが見つかって削除された場合は <code>true</code>、そうでない場合は <code>false</code> に解決される {{jsxref("Promise")}}。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードスニペットでは、<code>activate</code> イベントを待機してから、新しいサービスワーカーがアクティブになる前に、古い未使用のキャッシュをクリアする {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} ブロックを実行します。 ここに、保持したいキャッシュ名の配列（<code>cachesToKeep</code>）があります。 {{domxref("CacheStorage.keys")}} を使用して {{domxref("CacheStorage")}} オブジェクトのキャッシュのキーを返し、各キーをチェックしてその配列内にあるかどうかを確認します。 ない場合は、<code>delete()</code> を使用して削除します。</p>
+
+<pre class="brush: js">this.addEventListener('activate', function(event) {
+  var cachesToKeep = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cachesToKeep.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</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', '#cache-storage-delete', 'CacheStorage: delete')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.delete")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cachestorage/has/index.html b/files/ja/web/api/cachestorage/has/index.html
new file mode 100644
index 0000000000..e724073c44
--- /dev/null
+++ b/files/ja/web/api/cachestorage/has/index.html
@@ -0,0 +1,84 @@
+---
+title: CacheStorage.has()
+slug: Web/API/CacheStorage/has
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - has
+translation_of: Web/API/CacheStorage/has
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("CacheStorage")}} インターフェイスの <strong><code>has()</code></strong> メソッドは、{{domxref("Cache")}} オブジェクトが <code>cacheName</code> と一致する場合に <code>true</code> に解決される {{jsxref("Promise")}} を返します。</span></p>
+
+<p>グローバルな {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} プロパティを介して <code>CacheStorage</code> にアクセスできます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">caches.has(<em>cacheName</em>).then(function(<em>boolean</em>) {
+  // true: キャッシュが存在します！
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><code>cacheName</code></dt>
+ <dd> {{domxref("CacheStorage")}} で探している {{domxref("Cache")}} オブジェクトの名前を表す {{domxref("DOMString")}}。</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>
+
+<p>次の例では、最初に <code>'v1'</code> というキャッシュが存在するかどうかを確認します。 その場合、アセットのリストを追加します。 そうでない場合、何らかのキャッシュセットアップ関数を実行します。</p>
+
+<pre class="brush: js">caches.has('v1').then(function(hasCache) {
+  if (!hasCache) {
+    someCacheSetupfunction();
+  } else {
+    caches.open('v1').then(function(cache) {
+      return cache.addAll(myAssets);
+    });
+  }
+}).catch(function() {
+  // ここで例外を処理します。
+});</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', '#cache-storage-has', 'CacheStorage: has')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.has")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cachestorage/index.html b/files/ja/web/api/cachestorage/index.html
new file mode 100644
index 0000000000..747e2d6462
--- /dev/null
+++ b/files/ja/web/api/cachestorage/index.html
@@ -0,0 +1,196 @@
+---
+title: CacheStorage
+slug: Web/API/CacheStorage
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+translation_of: Web/API/CacheStorage
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><strong><code>CacheStorage</code></strong> インターフェイスは、{{domxref("Cache")}} オブジェクトのストレージを表します。</p>
+
+<p>このインターフェイスは、</p>
+
+<ul>
+ <li>{{domxref("ServiceWorker")}} や他のタイプのワーカーまたは {{domxref("window")}} のスコープからアクセスできるすべての名前付きキャッシュのマスターディレクトリを提供します（{{SpecName('Service Workers')}} の仕様で定義されていても、サービスワーカーでのみの使用に限定されません）。
+  <div class="note"><strong>注</strong>: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063">Chrome と Safari は、HTTPS を介したウィンドウコンテキストにのみ `CacheStorage` を公開します</a>（英語）。 SSL 証明書が設定されていない限り、{{domxref("window.caches")}} は <code>undefined</code> になります。</div>
+ </li>
+ <li>対応する {{domxref("Cache")}} オブジェクトへの文字列名のマッピングを維持します。</li>
+</ul>
+
+<p>{{domxref("CacheStorage.open()")}} を使用して、{{domxref("Cache")}} インスタンスを取得します。</p>
+
+<p>{{domxref("CacheStorage.match()")}} を使用して、所与の {{domxref("Request")}} が <code>CacheStorage</code> オブジェクトが追跡する {{domxref("Cache")}} オブジェクトのキーであるかどうかを確認します。</p>
+
+<p>グローバルな {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} プロパティを介して <code>CacheStorage</code> にアクセスできます。</p>
+
+<div class="note"><strong>注</strong>: CacheStorage は、信頼されていないオリジン（つまり、この定義は将来より複雑になる可能性がありますが、HTTPS を使用しないオリジン）で <code>SecurityError</code> で常に拒否します。 テストするときは、 Firefox 開発ツールの設定/歯車印メニューの「HTTP による Service Worker を有効化（ツールボックスを開いた時）」オプションをチェックすることで、この問題を回避できます。</div>
+
+<div class="note"><strong>注</strong>: {{domxref("CacheStorage.match()")}} は便利なメソッドです。 キャッシュエントリと一致する同等の機能を実装するには、{{domxref("CacheStorage.keys()")}} からキャッシュ名の配列を返し、{{domxref("CacheStorage.open()")}} で各キャッシュを開き、{{domxref("Cache.match()")}} で必要なものと一致させます。</div>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<dl>
+ <dt>{{domxref("CacheStorage.match()")}}</dt>
+ <dd>所与の {{domxref("Request")}} が、{{domxref("CacheStorage")}} オブジェクトが追跡する {{domxref("Cache")}} オブジェクトのキーであるかどうかを確認し、その一致で解決する {{jsxref("Promise")}} を返します。</dd>
+ <dt>{{domxref("CacheStorage.has()")}}</dt>
+ <dd><code>cacheName</code> に一致する {{domxref("Cache")}} オブジェクトが存在する場合、<code>true</code> に解決される {{jsxref("Promise")}} を返します。</dd>
+ <dt>{{domxref("CacheStorage.open()")}}</dt>
+ <dd><code>cacheName</code> に一致する {{domxref("Cache")}} オブジェクトに解決される {{jsxref("Promise")}} を返します（まだ存在しない場合は新しいキャッシュが作成されます）。</dd>
+ <dt>{{domxref("CacheStorage.delete()")}}</dt>
+ <dd><code>cacheName</code> に一致する {{domxref("Cache")}} オブジェクトを見つけ、見つかった場合は {{domxref("Cache")}} オブジェクトを削除し、<code>true</code> に解決される {{jsxref("Promise")}} を返します。 {{domxref("Cache")}} オブジェクトが見つからない場合、<code>false</code> に解決されます。</dd>
+ <dt>{{domxref("CacheStorage.keys()")}}</dt>
+ <dd>{{domxref("CacheStorage")}} によって追跡されるすべての名前付き {{domxref("Cache")}} オブジェクトに対応する文字列を含む配列で解決される {{jsxref("Promise")}} を返します。 このメソッドを使用して、すべての {{domxref("Cache")}} オブジェクトのリストを反復処理します。</dd>
+</dl>
+
+<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("InstallEvent")}} が発生するのを待ち、{{domxref("ExtendableEvent.waitUntil","waitUntil")}} を実行してアプリのインストールプロセスを処理します。 これは、{{domxref("CacheStorage.open")}} を呼び出して新しいキャッシュを作成し、{{domxref("Cache.addAll")}} を使用して一連のアセットを追加することで構成されます。</p>
+
+<p>2番目のコードブロックでは、{{domxref("FetchEvent")}} が発生するのを待ちます。 次のようなカスタムレスポンスを作成します。</p>
+
+<ol>
+ <li><code>CacheStorage</code> でリクエストに一致するものが見つかったかどうかを確認します。 もしそうなら、それを提供します。</li>
+ <li>そうでない場合は、ネットワークからリクエストを取得し、最初のブロックで作成されたキャッシュも開き、{{domxref("Cache.put")}}（<code>cache.put(event.request, response.clone())</code>）を使用してリクエストのクローンを追加します。</li>
+ <li>これが失敗した場合（例えば、ネットワークがダウンしているため）、フォールバックレスポンスを返します。</li>
+</ol>
+
+<p>最後に、{{domxref("FetchEvent.respondWith")}} を使用して、カスタムレスポンスが等しくなったものをすべて返します。</p>
+
+<pre class="brush: js">self.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/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() は常に解決します
+    // ただし、成功の場合はレスポンスに値があります
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // レスポンスは1回のみ使用できます
+        // クローンを保存して、1番目のコピーをキャッシュに入れ、
+        // 2番目のコピーを提供する必要があります
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});
+</pre>
+
+<p>このスニペットは、サービスワーカーのコンテキストの外部で API を使用する方法を示しており、`await` 演算子を使用してより読みやすいコードにしています。</p>
+
+<pre class="brush: js">// キャッシュからデータを取得しようとしますが、フォールバックしてライブで取得します。
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( '取得したキャッシュデータ' );
+      return cachedData;
+   }
+
+   console.log( '最新データの取得' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// キャッシュからデータを取得します。
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// 古いキャッシュを削除して、ユーザーのディスク容量を尊重します。
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr( 0, 6 );
+
+      if ( currentCache === key || ! isOurCache ) {
+         continue;
+      }
+
+      caches.delete( key );
+   }
+}
+
+try {
+   const data = await getData();
+   console.log( { data } );
+} catch ( error ) {
+   console.error( { error } );
+}</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', '#cachestorage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CacheStorage")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cachestorage/keys/index.html b/files/ja/web/api/cachestorage/keys/index.html
new file mode 100644
index 0000000000..02311df3a8
--- /dev/null
+++ b/files/ja/web/api/cachestorage/keys/index.html
@@ -0,0 +1,83 @@
+---
+title: CacheStorage.keys()
+slug: Web/API/CacheStorage/keys
+tags:
+  - API
+  - CacheStorage
+  - Method
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - keys
+translation_of: Web/API/CacheStorage/keys
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("CacheStorage")}} インターフェイスの <strong><code>keys()</code></strong> メソッドは、{{domxref("CacheStorage")}} オブジェクトによって追跡されるすべての名前付き {{domxref("Cache")}} オブジェクトに対応する文字列をそれが作成された順番で含む配列で解決する {{jsxref("Promise")}} を返します。 このメソッドを使用して、すべての {{domxref("Cache")}} オブジェクトのリストを反復処理します。</span></p>
+
+<p>グローバルな {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} プロパティを介して <code>CacheStorage</code> にアクセスできます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">caches.keys().then(function(<em>keyList</em>) {
+  // keyList で何かをする
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>{{domxref("CacheStorage")}} オブジェクト内の {{domxref("Cache")}} 名の配列で解決する {{jsxref("Promise")}}。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードスニペットでは、{{domxref("ServiceWorkerGlobalScope.onactivate", "activate")}} イベントを待機してから、新しいサービスワーカーがアクティブ化される前に、古い未使用のキャッシュをクリアする {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} ブロックを実行します。 ここに、保持したいキャッシュの名前を含むホワイトリスト（<code>cacheWhitelist</code>）があります。 <code>keys()</code> を使用して {{domxref("CacheStorage")}} オブジェクトのキャッシュのキーを返し、各キーをチェックしてホワイトリストにあるかどうかを確認します。 ない場合は、{{domxref("CacheStorage.delete()")}} を使用して削除します。</p>
+
+<pre class="brush: js">then.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      });
+    })
+  );
+});</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-cachestorage-keys', 'CacheStorage: keys')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.keys")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cachestorage/match/index.html b/files/ja/web/api/cachestorage/match/index.html
new file mode 100644
index 0000000000..bd71e0f8d5
--- /dev/null
+++ b/files/ja/web/api/cachestorage/match/index.html
@@ -0,0 +1,117 @@
+---
+title: CacheStorage.match()
+slug: Web/API/CacheStorage/match
+tags:
+  - API
+  - CacheStorage
+  - Method
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - match
+translation_of: Web/API/CacheStorage/match
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("CacheStorage")}} インターフェイスの <strong><code>match()</code></strong> メソッドは、所与の {{domxref("Request")}} または URL 文字列が保存された {{domxref("Response")}} のキーであるかどうかをチェックします。 このメソッドは、{{domxref("Response")}} の {{jsxref("Promise")}}、または一致が見つからない場合に <code>undefined</code> に解決される {{jsxref("Promise")}} を返します。</span></p>
+
+<p>グローバルな {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} プロパティを介して <code>CacheStorage</code> にアクセスできます。</p>
+
+<p><code>Cache</code> オブジェクトは作成順に検索されます。</p>
+
+<div class="note"><strong>注</strong>: {{domxref("CacheStorage.match()", "caches.match()")}} は便利なメソッドです。 同等の機能は、{{domxref("Response")}} が返されるまで、（{{domxref("CacheStorage.keys()", "caches.keys()")}} によって返される順序で）各キャッシュで {{domxref("cache.match()")}} を呼び出すことです。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">caches.match(<em>request</em>, <em>options</em>).then(function(<em>response</em>) {
+  // response で何かをする
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>一致させたい {{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>
+  <li><code>cacheName</code>: 検索する特定のキャッシュを表す {{domxref("DOMString")}}。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>一致する {{domxref("Response")}} に解決される {{jsxref("Promise")}}。 指定されたリクエストに対する一致するレスポンスが見つからない場合、<code>Promise</code> は <code>undefined</code> に解決されます。<br>
+  </p>
+
+<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">self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() は常に解決します
+    // ただし、成功の場合はレスポンスに値があります
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // レスポンスは1回のみ使用できます
+        // クローンを保存して、1番目のコピーをキャッシュに入れ、
+        // 2番目のコピーを提供する必要があります
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).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-cachestorage-match', 'CacheStorage: match')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.match")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ja/web/api/cachestorage/open/index.html b/files/ja/web/api/cachestorage/open/index.html
new file mode 100644
index 0000000000..cd7c0c98bc
--- /dev/null
+++ b/files/ja/web/api/cachestorage/open/index.html
@@ -0,0 +1,94 @@
+---
+title: CacheStorage.open()
+slug: Web/API/CacheStorage/open
+tags:
+  - API
+  - CacheStorage
+  - Method
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - open
+translation_of: Web/API/CacheStorage/open
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("CacheStorage")}} インターフェイスの <strong><code>open()</code></strong> メソッドは、<code>cacheName</code> に一致する {{domxref("Cache")}} オブジェクトに解決される {{jsxref("Promise")}} を返します。</span></p>
+
+<p>グローバルな {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} プロパティを介して <code>CacheStorage</code> にアクセスできます。</p>
+
+<div class="note">
+<p><strong>注</strong>: 指定した {{domxref("Cache")}} が存在しない場合、その <code>cacheName</code> で新しいキャッシュを作成し、この新しい {{domxref("Cache")}} オブジェクトに解決される {{jsxref("Promise")}} を返します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">caches.open(<em>cacheName</em>).then(function(<em>cache</em>) {
+  // cache で何かをする
+});
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>開きたいキャッシュの名前。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>要求した {{domxref("Cache")}} オブジェクトに解決される {{jsxref("Promise")}}。</p>
+
+<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("InstallEvent")}} が発生するのを待ち、{{domxref("ExtendableEvent.waitUntil","waitUntil()")}} を実行してアプリのインストールプロセスを処理します。 これは、<code>CacheStorage.open()</code> を呼び出して新しいキャッシュを作成し、{{domxref("Cache.addAll()")}} を使用して一連のアセットを追加することで構成されます。</p>
+
+<pre class="brush: js">self.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/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.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-cachestorage-open', 'CacheStorage: open')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.open")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>