initial commit

6 files changed, 663 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/cachestorage/delete/index.html b/files/zh-cn/web/api/cachestorage/delete/index.html
new file mode 100644
index 0000000000..d41dd26026
--- /dev/null
+++ b/files/zh-cn/web/api/cachestorage/delete/index.html
@@ -0,0 +1,125 @@
+---
+title: CacheStorage.delete()
+slug: Web/API/CacheStorage/delete
+translation_of: Web/API/CacheStorage/delete
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("CacheStorage")}} 接口的 <code><strong>delete</strong></code><strong><code>()</code></strong> 方法查找匹配 <code>cacheName</code> 的 {{domxref("Cache")}} 对象，如果找到，则删除 {{domxref("Cache")}} 对象并返回一个resolve为true的 {{jsxref("Promise")}} . 如果未找到 {{domxref("Cache")}} 对象，则返回 <code>false</code>.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">caches.delete(<em>cacheName</em>).then(function(true) {
+  //your cache is now deleted
+});
+</pre>
+
+<h3 id="Returns">Returns</h3>
+
+<p>如果找到 {{domxref("Cache")}} 对象，删除它，返回一个resolve为 <code>true</code> 的 {{jsxref("Promise")}} ，否则，返回 <code>false</code> .</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>想要删除的 cache 对象的名称。</dd>
+</dl>
+
+<h2 id="实例" style="line-height: 30px; font-size: 2.14285714285714rem;">实例</h2>
+
+<p>在此代码片段中，我们等待一个activate事件，然后运行一个 {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} 块，其在一个新的 service worker 被激活前清除所有旧的、未使用的cache. 这里我们有一个白名单，其中包含我们想要保留的cache的name. 我们使用 {{domxref("CacheStorage.keys")}} 返回 {{domxref("CacheStorage")}} 对象中cache的键，然后检查每个键值，以查看它是否在白名单中。如果没有，我们使用 <code>delete()</code> 删除它。</p>
+
+<pre class="brush: js">this.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="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/cachestorage/has/index.html b/files/zh-cn/web/api/cachestorage/has/index.html
new file mode 100644
index 0000000000..b9e985a673
--- /dev/null
+++ b/files/zh-cn/web/api/cachestorage/has/index.html
@@ -0,0 +1,125 @@
+---
+title: CacheStorage.has()
+slug: Web/API/CacheStorage/has
+translation_of: Web/API/CacheStorage/has
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("CacheStorage")}} 对象的 <strong><code>has()</code></strong>方法返回一个 {{jsxref("Promise")}} 对象，当 {{domxref("Cache")}} 对象有 <code>cacheName</code>  时被处理为  <code>true</code> 。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">caches.has(<em>cacheName</em>).then(function(<em>boolean</em>) {
+  // true: 缓存存在
+});
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>返回一个 {{jsxref("Promise")}} 对象，缓存存在时resolve的布尔值为 <code>true</code> 否则为 <code>false</code> 。</p>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>一个表示你正在 {{domxref("CacheStorage")}} 中查找的 {{domxref("Cache")}} 对象name的 {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h2 id="例子" style="line-height: 30px; font-size: 2.14285714285714rem;">例子</h2>
+
+<p>在下面的例子中首先检测是否有名为 v1 的缓存存在， 如果存在我们会向其添加内容,，如果不存在我们会做些对应的初始化动作。</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="规范">规范</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', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) 在 <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)被默认禁用。</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/cachestorage/index.html b/files/zh-cn/web/api/cachestorage/index.html
new file mode 100644
index 0000000000..4c86445492
--- /dev/null
+++ b/files/zh-cn/web/api/cachestorage/index.html
@@ -0,0 +1,115 @@
+---
+title: CacheStorage
+slug: Web/API/CacheStorage
+tags:
+  - API
+  - CacheStorage
+  - ServiceWorker
+translation_of: Web/API/CacheStorage
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>CacheStorage</code></strong> 接口表示 {{domxref("Cache")}} 对象的存储。它提供了一个 {{domxref("ServiceWorker")}} 、其它类型worker或者 {{domxref("window")}} 范围内可以访问到的所有命名cache的主目录（它并不是一定要和service workers一起使用，即使它是在service workers规范中定义的），并维护一份字符串名称到相应 {{domxref("Cache")}} 对象的映射。</p>
+
+<p><code>CacheStorage</code>  同样暴露了 {{domxref("CacheStorage.open()")}} 和 {{domxref("CacheStorage.match()")}}方法。使用 {{domxref("CacheStorage.open()")}} 获取 {{domxref("Cache")}} 实例。使用 {{domxref("CacheStorage.match()")}} 检查给定的 {{domxref("Request")}} 是否是 <code>CacheStorage</code> 对象跟踪的任何 {{domxref("Cache")}} 对象中的键。</p>
+
+<p>你可以通过 {{domxref("WorkerGlobalScope.caches", "caches")}} 属性访问 <code>CacheStorage</code> .</p>
+
+<div class="note"><strong>注意</strong>: CacheStorage 总是对不受信任的源（即那些不使用HTTPS，尽管此定义将来很可能变得更加复杂。）使用 <code>SecurityError</code> reject. 测试时，你可以在Firefox Devtools选项/齿轮菜单中通过选中"通过HTTP启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。</div>
+
+<div class="note"><strong>注意</strong>: {{domxref("CacheStorage.match()")}} 是一个便捷方法。匹配cache条目的同等功能可以通过执行 {{domxref("CacheStorage.open()")}} 打开cache，使用 {{domxref("CacheStorage.keys()")}} 返回它包含的条目，并将你所需的条目与 {{domxref("CacheStorage.match()")}} 匹配。</div>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("CacheStorage.match()")}}</dt>
+ <dd>检查给定的 {{domxref("Request")}} 是否是 {{domxref("CacheStorage")}} 对象跟踪的任何 {{domxref("Cache")}} 对象的键，并返回一个resolve为该匹配的 {{jsxref("Promise")}} .</dd>
+ <dt>{{domxref("CacheStorage.has()")}}</dt>
+ <dd>如果存在与 <code>cacheName</code> 匹配的 {{domxref("Cache")}} 对象，则返回一个resolve为true的 {{jsxref("Promise")}} .</dd>
+ <dt>{{domxref("CacheStorage.open()")}}</dt>
+ <dd>返回一个 {{jsxref("Promise")}} ，resolve为匹配  <code>cacheName</code> （如果不存在则创建一个新的cache）的 {{domxref("Cache")}} 对象</dd>
+ <dt>{{domxref("CacheStorage.delete()")}}</dt>
+ <dd>查找匹配 <code>cacheName</code> 的 {{domxref("Cache")}} 对象，如果找到，则删除 {{domxref("Cache")}} 对象并返回一个resolve为true的 {{jsxref("Promise")}} 。如果没有找到 {{domxref("Cache")}} 对象，则返回 <code>false</code>.</dd>
+ <dt>{{domxref("CacheStorage.keys()")}}</dt>
+ <dd>返回一个 {{jsxref("Promise")}} ，它将使用一个包含与 {{domxref("CacheStorage")}} 追踪的所有命名 {{domxref("Cache")}} 对象对应字符串的数组来resolve. 使用该方法迭代所有 {{domxref("Cache")}} 对象的列表。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>此代码片段来自于MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> （请参阅<a href="https://mdn.github.io/sw-test/">sw-test running live</a>.）此 service worker 脚本等待 {{domxref("InstallEvent")}} 触发，然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理应用程序的安装过程。这包括调用 {{domxref("CacheStorage.open")}} 创建一个新的cache，然后使用 {{domxref("Cache.addAll")}} 向其添加一系列资源。</p>
+
+<p>在第二个代码块，我们等待 {{domxref("FetchEvent")}} 触发。我们构建自定义相应，像这样：</p>
+
+<ol>
+ <li>检查CacheStorage中是否找到了匹配请求的内容。如果是，使用匹配内容。</li>
+ <li>如果没有，从网络获取请求，然后同样打开第一个代码块中创建的cache，并使用 {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.) 将请求的clone副本添加到它。</li>
+ <li>如果此操作失败（例如，因为网络关闭），返回备用相应。</li>
+</ol>
+
+<p>最后，使用 {{domxref("FetchEvent.respondWith")}} 返回自定义响应最终等于的内容。</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/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+this.addEventListener('fetch', function(event) {
+  var response;
+  event.respondWith(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="说明">说明</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CacheStorage")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/cachestorage/keys/index.html b/files/zh-cn/web/api/cachestorage/keys/index.html
new file mode 100644
index 0000000000..8d174f9c2c
--- /dev/null
+++ b/files/zh-cn/web/api/cachestorage/keys/index.html
@@ -0,0 +1,122 @@
+---
+title: CacheStorage.keys()
+slug: Web/API/CacheStorage/keys
+translation_of: Web/API/CacheStorage/keys
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">{{domxref("CacheStorage")}} 接口的 <code><strong>keys</strong></code><strong><code>()</code></strong> 方法返回一个 {{jsxref("Promise")}}对象，它使用一个数组resolve，该数组包含 {{domxref("CacheStorage")}} 对象按创建顺序跟踪的所有命名 {{domxref("Cache")}}  对象对应的字符串。使用此方法迭代所有 {{domxref("Cache")}} 对象。</span></p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">caches.keys().then(function(<em>keyList</em>) {
+  //对keyList做操作
+});
+</pre>
+
+<h3 id="返回">返回</h3>
+
+<p>一个使用 {{domxref("CacheStorage")}} 对象中 {{domxref("Cache")}} 名称数组resolve的 {{jsxref("Promise")}} </p>
+
+<h3 id="参数">参数</h3>
+
+<p>无。</p>
+
+<h2 id="示例" style="line-height: 30px; font-size: 2.14285714285714rem;">示例</h2>
+
+<p>在此代码片段中，我们监听{{domxref("ServiceWorkerGlobalScope.onactivate", "activate")}} 事件，然后运行一个 {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} 方法，该方法在新的 service worker 被激活之前清除老的、无用的cache。 这里我们设置一个包含缓存名称的白名单。 通过使用 <code>keys()方法</code> 来返回{{domxref("CacheStorage")}} 对象中的keys集合，然后检查缓存key是否在白名单中，如果不存在，则使用 {{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="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(27)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile(27)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="亦可参考">亦可参考</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/cachestorage/match/index.html b/files/zh-cn/web/api/cachestorage/match/index.html
new file mode 100644
index 0000000000..c978402bf0
--- /dev/null
+++ b/files/zh-cn/web/api/cachestorage/match/index.html
@@ -0,0 +1,91 @@
+---
+title: CacheStorage.match()
+slug: Web/API/CacheStorage/match
+translation_of: Web/API/CacheStorage/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">{{domxref("CacheStorage")}} 接口(可适用于全局性<code>caches</code>) 的 <strong><code>match()</code></strong> 方法检查给定的{{domxref("Request")}} 对象或url字符串是否是一个已存储的 {{domxref("Response")}} 对象的key. </span><span class="seoSummary">这个方法针对 {{domxref("Response")}} 返回一个 {{jsxref("Promise")}} ，如果没有匹配则返回 <code>undefined</code> 。</span></p>
+
+<p>cache对象按创建顺序查询。</p>
+
+<div class="note"><strong>提示</strong>: {{domxref("CacheStorage.match()", "caches.match()")}} 是一个便捷方法。其作用等同于在每个缓存上调用 {{domxref("cache.match()")}} 方法 （按照{{domxref("CacheStorage.keys()", "caches.keys()")}}返回的顺序) 直到返回{{domxref("Response")}} 对象。</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">caches.match(<em>request</em>, <em>options</em>).then(function(<em>response</em>) {
+  // Do something with the response
+});
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>想要匹配的 {{domxref("Request")}}。这个参数可以是 {{domxref("Request")}} 对象或 URL 字符串。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>这个对象中的属性控制在匹配操作中如何进行匹配选择。可选择参数如下:
+ <ul>
+  <li><code>ignoreSearch</code>: {{domxref("Boolean")}}值， 指定匹配过程是否应该忽略url中查询参数。举个例子，如果该参数设置为<code>true</code>, 那么 <code>?value=bar</code> 作为 <code>http://foo.com/?value=bar</code> 中的查询参数将会在匹配过程中被忽略。该参数默认 <code>false</code>。</li>
+  <li><code>ignoreMethod</code>:  {{domxref("Boolean")}} 值，当被设置为 <code>true</code> 时，将会阻止在匹配操作中对 {{domxref("Request")}}请求的 <code>http</code> 方式的验证 (通常只允许 <code>GET</code> 和 <code>HEAD</code> 两种请求方式)。该参数默认为 <code>false</code>.</li>
+  <li><code>ignoreVary</code>:  {{domxref("Boolean")}} 值，当该字段被设置为 <code>true,</code> 告知在匹配操作中忽略对<code>VARY</code>头信息的匹配。换句话说，当请求 URL 匹配上，你将获取匹配的 {{domxref("Response")}} 对象，无论请求的 <code>VARY</code>  头存在或者没有。该参数默认为 <code>false</code>.</li>
+  <li><code>cacheName</code>:  {{domxref("DOMString")}} 值， 表示所要搜索的缓存名称。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>返回resolve为匹配 {{domxref("Response")}} 的 {{jsxref("Promise")}} 对象。如果没有与指定request相匹配response，promise将使用 <code>undefined</code> resolve.</p>
+
+<h2 id="例子" style="line-height: 30px; font-size: 2.14285714285714rem;">例子</h2>
+
+<p>此示例来自于MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> （请参阅 <a href="https://mdn.github.io/sw-test/">sw-test running live</a>）。这里，等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应，像这样：</p>
+
+<ol>
+ <li>使用 {{domxref("CacheStorage.match","CacheStorage.match()")}} 检查 {{domxref("CacheStorage")}} 中是否存在匹配请求，如果存在，则使用它。</li>
+ <li>如果没有，使用  <code>open()</code> 打开 <code>v1</code> cache，使用 {{domxref("Cache.put","Cache.put()")}}  将默认网络请求放入 cache 中，并只用 <code>return response.clone()</code> 返回默认网络请求的克隆副本。最后一个是必须的，因为 <code>put()</code> 使用响应主体。</li>
+ <li>如果此操作失败（例如，因为网络已关闭），则返回备用响应。</li>
+</ol>
+
+<pre class="brush: js">caches.match(event.request).then(function(response) {
+  return response || fetch(event.request).then(function(r) {
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, r);
+    });
+    return r.clone();
+  });
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.match")}}</p>
+
+<h2 id="亦可参考">亦可参考</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches", "self.caches")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/cachestorage/open/index.html b/files/zh-cn/web/api/cachestorage/open/index.html
new file mode 100644
index 0000000000..cd2b4f46b0
--- /dev/null
+++ b/files/zh-cn/web/api/cachestorage/open/index.html
@@ -0,0 +1,85 @@
+---
+title: CacheStorage.open()
+slug: Web/API/CacheStorage/open
+translation_of: Web/API/CacheStorage/open
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">{{domxref("CacheStorage")}} </span>接口的<span class="seoSummary"> <strong><code>open()</code></strong> 方法返回一个resolve为匹配 <code>cacheName</code> 的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} .</span></p>
+
+<div class="note">
+<p><strong>注意</strong>: 如果指定的 {{domxref("Cache")}} 不存在，则使用该 <code>cacheName</code> 创建一个新的cache，并返回一个resolve为该新 {{domxref("Cache")}} 对象的{{jsxref("Promise")}}.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">// "caches" is a global read-only variable, which is an instance of CacheStorage,
+// For more info, refer to: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/caches
+
+caches.open(<em>cacheName</em>).then(function(<em>cache</em>) {
+  // Do something with your cache
+});
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>要打开的cache对象name.</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个resolve为请求的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} .</p>
+
+<h2 id="示例" style="line-height: 30px; font-size: 2.14285714285714rem;">示例</h2>
+
+<p>此示例来自于MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> （请参阅 <a href="https://mdn.github.io/sw-test/">sw-test running live</a>）。这里，等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应，像这样：</p>
+
+<ol>
+ <li>使用 {{domxref("CacheStorage.match","CacheStorage.match()")}} 检查 {{domxref("CacheStorage")}} 中是否存在匹配请求，如果存在，则使用它。</li>
+ <li>如果没有，使用  {{domxref("CacheStorage.open","CacheStorage.open()")}} 打开 <code>v1</code> cache，使用 {{domxref("Cache.put","Cache.put()")}}  将默认网络请求放入 cache 中，并使用 <code>return response.clone()</code> 返回默认网络请求的克隆副本。最后一个是必须的，因为 <code>put()</code> 使用响应主体。</li>
+ <li>如果此操作失败（例如，因为网络已关闭），则返回备用响应。</li>
+</ol>
+
+<pre class="brush: js">var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(response) {
+  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="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.open")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>