aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/cache
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/cache
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/api/cache')
-rw-r--r--files/zh-cn/web/api/cache/add/index.html198
-rw-r--r--files/zh-cn/web/api/cache/addall/index.html202
-rw-r--r--files/zh-cn/web/api/cache/delete/index.html150
-rw-r--r--files/zh-cn/web/api/cache/index.html282
-rw-r--r--files/zh-cn/web/api/cache/keys/index.html136
-rw-r--r--files/zh-cn/web/api/cache/match/index.html173
-rw-r--r--files/zh-cn/web/api/cache/matchall/index.html82
-rw-r--r--files/zh-cn/web/api/cache/put/index.html109
8 files changed, 1332 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/cache/add/index.html b/files/zh-cn/web/api/cache/add/index.html
new file mode 100644
index 0000000000..dbce4c5b21
--- /dev/null
+++ b/files/zh-cn/web/api/cache/add/index.html
@@ -0,0 +1,198 @@
+---
+title: Cache.add()
+slug: Web/API/Cache/add
+translation_of: Web/API/Cache/add
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("Cache")}}接口的 <strong><code>add()</code></strong>方法接受一个URL作为参数,请求参数指定的URL,并将返回的response对象添加到给定的cache中。 <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()")}}这个API。</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>注意</strong></span>: <code>add()</code> 将会覆盖之前存储在cache中与request匹配的任何key/value对。</p>
+</div>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>注意</strong></span>: 之前的Cache  (Blink 和 Gecko内核版本) 在实现{{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, 和 {{domxref("Cache.put")}} 的策略是在response结果完全写入缓存后才会resolve当前的promise。更新后的规范版本中一旦条目被记录到数据库就会resolve当前的promise,即使当前response结果还在传输中。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() {
+ //request has been added to the cache
+});
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>要添加到cache的request。它可以是一个 {{domxref("Request")}} 对象,也可以是 URL。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>void返回值的 {{jsxref("Promise")}} </p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col"><strong>Exception</strong></th>
+ <th scope="col"><strong>Happens when</strong></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>TypeError</code></td>
+ <td>
+ <p>URL的协议不是 <code>http</code> 或 <code>https。</code></p>
+
+ <p>请求返回的http状态码不是2xx (不是一个成功的响应) 。这种情况常常发生在请求不成功,或者是一个没有配置CORS的跨域请求(这种情况下返回的状态码永远是0)。</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<p>下面的代码块等待 {{domxref("InstallEvent")}} 事件触发,然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理该应用程序的安装过程。 包括调用 {{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="规范">规范</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', 'Cache')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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 (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>24</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>Require HTTPS</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>TypeError</code> if request is not successful</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(47.0)}}<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</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>Firefox OS</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>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ </tr>
+ <tr>
+ <td>Require HTTPS</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ </tr>
+ <tr>
+ <td><code>TypeError</code> if request is not successful</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</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/cache/addall/index.html b/files/zh-cn/web/api/cache/addall/index.html
new file mode 100644
index 0000000000..fad889eab9
--- /dev/null
+++ b/files/zh-cn/web/api/cache/addall/index.html
@@ -0,0 +1,202 @@
+---
+title: Cache.addAll()
+slug: Web/API/Cache/addAll
+translation_of: Web/API/Cache/addAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<h2 id="概要">概要</h2>
+
+<p>{{domxref("Cache")}} 接口的 <strong><code>addAll()</code></strong> 方法接受一个URL数组,检索它们,并将生成的response对象添加到给定的缓存中。 在检索期间创建的request对象成为存储的response操作的key。</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>addAll()</code> will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting <code>put()</code> operation would overwrite a previous cache entry created by the same <code>addAll()</code> method.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage.  More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">cache.addAll(requests[]).then(function() {
+ //requests have been added to the cache
+});
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>requests</dt>
+ <dd>要获取并添加到缓存的字符串URL数组。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>A {{jsxref("Promise")}} that resolves with void.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col"><strong>Exception</strong></th>
+ <th scope="col"><strong>Happens when</strong></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>TypeError</code></td>
+ <td>
+ <p>The URL scheme is not <code>http</code> or <code>https</code>.</p>
+
+ <p>The Response status is not in the 200 range (i.e., not a successful response.) This occurs if the request does not return successfully, but also if the request is a <em>cross-origin no-cors</em> request (in which case the reported status is always 0.)</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="示例"><span style="font-size: 30px;">示例</span></h2>
+
+<p>此代码块等待一个 {{domxref("InstallEvent")}} 事件触发,然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理该应用程序的安装进程。 包括调用 {{domxref("CacheStorage.open")}} 创建一个新的cache,然后使用 <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>
+
+<h3 id="规范">规范</h3>
+
+<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', 'Cache')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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 (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>24</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>Require HTTPS</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>TypeError</code> if request is not successful</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(47.0)}}<sup>[1]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</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>Firefox OS</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>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ </tr>
+ <tr>
+ <td>Require HTTPS</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ </tr>
+ <tr>
+ <td><code>TypeError</code> if request is not successful</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</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/cache/delete/index.html b/files/zh-cn/web/api/cache/delete/index.html
new file mode 100644
index 0000000000..f6b20ab981
--- /dev/null
+++ b/files/zh-cn/web/api/cache/delete/index.html
@@ -0,0 +1,150 @@
+---
+title: Cache.delete()
+slug: Web/API/Cache/delete
+tags:
+ - API
+ - Cache
+translation_of: Web/API/Cache/delete
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("Cache")}} 接口的 <strong><code>delete()</code></strong> 方法查询request为key的 {{domxref("Cache")}} 条目,如果找到,则删除该 {{domxref("Cache")}} 条目并返回resolve为true的 {{jsxref("Promise")}} 。 如果没有找到,则返回resolve为false的 {{jsxref("Promise")}} 。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">cache.delete(request,{options}).then(function(true) {
+ //your cache entry has been deleted
+});
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>如果cache条目被删除,则返回resolve为true的 {{jsxref("Promise")}},否则,返回resolve为false的 {{jsxref("Promise")}}。</p>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>请求删除的 {{domxref("Request")}}。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>一个对象,其属性控制删除操作中如何处理匹配缓存。可用的选项是:
+ <ul>
+ <li><code>ignoreSearch</code>: 一个 {{domxref("Boolean")}} 值,指定匹配进程中是否忽略url中的查询字符串。如果设置为true,<code>http://foo.com/?value=bar 中的 ?value=bar 部分在执行匹配时会被忽略。默认为false。</code></li>
+ <li><code>ignoreMethod</code>: 一个 {{domxref("Boolean")}} 值,当设置为true时,将阻止匹配操作验证{domxref("Request")}} <code>HTTP方法(通常只允许GET和HEAD)。默认为false。</code></li>
+ <li><code>ignoreVary</code>: 一个 {{domxref("Boolean")}} 值,当设置为true时,告诉匹配操作不执行<code>VARY头匹配。</code>In other words, if the URL matches you will get a match regardless of  whether the {{domxref("Response")}} object has a <code>VARY</code> header. <code>默认为false。</code></li>
+ <li><code>cacheName</code>: A {{domxref("DOMString")}} that represents a specific cache to search within. Note that this option is ignored by <code>Cache.delete()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="示例" style="line-height: 30px; font-size: 2.14285714285714rem;">示例</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+ someUIUpdateFunction();
+ });
+})</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', 'Cache')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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 (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+ <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOpera(24)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>All options supported</td>
+ <td>{{CompatChrome(54.0)}}</td>
+ <td> </td>
+ <td> </td>
+ <td>{{CompatOpera(41)}}</td>
+ <td> </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>Firefox OS</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(39)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+ </tr>
+ <tr>
+ <td>All options supported</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td> </td>
+ <td> </td>
+ <td> </td>
+ <td>{{CompatOperaMobile(41)}}</td>
+ <td> </td>
+ <td>{{CompatChrome(54.0)}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The options parameter only supports <code>ignoreSearch</code>, and <code>cacheName</code>. </p>
+
+<p>[2] 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/cache/index.html b/files/zh-cn/web/api/cache/index.html
new file mode 100644
index 0000000000..9e51499607
--- /dev/null
+++ b/files/zh-cn/web/api/cache/index.html
@@ -0,0 +1,282 @@
+---
+title: Cache
+slug: Web/API/Cache
+tags:
+ - API
+ - Cache
+ - Offline
+ - Service Workers
+ - Storage
+translation_of: Web/API/Cache
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><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")}} 生命周期的一部分。请注意,Cache 接口像 workers 一样,是暴露在 window 作用域下的。尽管它被定义在 service worker 的标准中,  但是它不必一定要配合 service worker 使用.</p>
+
+<p>一个域可以有多个命名 Cache 对象。你需要在你的脚本 (例如,在 {{domxref("ServiceWorker")}} 中)中处理缓存更新的方式。除非明确地更新缓存,否则缓存将不会被更新;除非删除,否则缓存数据不会过期。使用 {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开一个Cache 对象,再使用 Cache 对象的方法去处理缓存.</p>
+
+<p>你需要定期地清理缓存条目,因为每个浏览器都硬性限制了一个域下缓存数据的大小。缓存配额使用估算值,可以使用 {{domxref("StorageEstimate")}} API 获得。浏览器尽其所能去管理磁盘空间,但它有可能删除一个域下的缓存数据。浏览器要么自动删除特定域的全部缓存,要么全部保留。确保按名称安装版本缓存,并仅从可以安全操作的脚本版本中使用缓存。查看 <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Deleting old caches</a> 获取更多信息.</p>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}和{{domxref("Cache.addAll")}}只能在<code>GET</code>请求下使用。</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage.  More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> 自Chrome 46版本起,Cache API只保存安全来源的请求,即那些通过HTTPS服务的请求。</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The key matching algorithm depends on the <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">VARY header</a> in the value. So matching a new key requires looking at both key and value for entries in the Cache.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Cache API不支持HTTP缓存头。</p>
+</div>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
+ <dd>返回一个 {{jsxref("Promise")}}对象,resolve的结果是跟 {{domxref("Cache")}} 对象匹配的第一个已经缓存的请求。</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
+ <dd>返回一个{{jsxref("Promise")}} 对象,resolve的结果是跟{{domxref("Cache")}}对象匹配的所有请求组成的数组。</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
+ <dd>抓取这个URL, 检索并把返回的response对象添加到给定的Cache对象.这在功能上等同于调用 fetch(), 然后使用 Cache.put() 将response添加到cache中.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
+ <dd>抓取一个URL数组,检索并把返回的response对象添加到给定的Cache对象。</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
+ <dd>同时抓取一个请求及其响应,并将其添加到给定的cache。</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
+ <dd>搜索key值为request的{{domxref("Cache")}} 条目。如果找到,则删除该{{domxref("Cache")}} 条目,并且返回一个resolve为true的{{jsxref("Promise")}}对象;如果未找到,则返回一个resolve为false的{{jsxref("Promise")}}对象。</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
+ <dd>返回一个{{jsxref("Promise")}}对象,resolve的结果是{{domxref("Cache")}}对象key值组成的数组。</dd>
+</dl>
+
+<h2 id="示例">示例</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 live</a>) 。该代码使用{{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开任何具有以<code>font/开始的</code>Content-Type头的{{domxref("Cache")}}对象。</p>
+
+<p>代码然后使用{{domxref("Cache.match", "Cache.match(request, options)")}}查看缓存中是否已经有一个匹配的font,如果是,则返回它。 如果没有匹配的字体,代码将通过网络获取字体,并使用 {{domxref("Cache.put","Cache.put(request, response)")}}来缓存获取的资源。</p>
+
+<p>代码处理从{{domxref("Globalfetch.fetch","fetch()")}} 操作抛出的异常。 请注意,HTTP错误响应(例如404)不会触发异常。 它将返回一个具有相应错误代码集的正常响应对象。</p>
+
+<p>该代码片段还展示了服务工作线程使用的缓存版本控制的最佳实践。 虽然在这个例子中只有一个缓存,但同样的方法可用于多个缓存。 它将缓存的速记标识符映射到特定的版本化缓存名称。 代码还会删除命名不在CURRENT_CACHES中的所有缓存。</p>
+
+<div class="note"><strong>注意:</strong> 在Chrome中,请访问chrome://inspect/#service-workers ,然后单击注册的服务工作线程下面的“inspect”链接,查看 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> 脚本正在执行的各种操作的日志记录。</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// 简写标识符映射到特定版本的缓存。
+var CURRENT_CACHES = {
+ font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+ var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+ return CURRENT_CACHES[key];
+ });
+
+ // 在promise成功完成之前,活跃的worker不会被视作已激活。
+ event.waitUntil(
+ caches.keys().then(function(cacheNames) {
+ return Promise.all(
+ cacheNames.map(function(cacheName) {
+ if (expectedCacheNames.indexOf(cacheName) == -1) {
+ 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(
+
+ // 打开以'font'开头的Cache对象。
+ caches.open(CURRENT_CACHES['font']).then(function(cache) {
+ return cache.match(event.request).then(function(response) {
+ if (response) {
+ console.log(' Found response in cache:', response);
+
+ return response;
+ }
+ }).catch(function(error) {
+
+ // 处理match()或fetch()引起的异常。
+ console.error(' Error in fetch handler:', error);
+
+ throw error;
+ });
+ })
+ );
+});</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', 'Cache')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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 (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(40.0)}}</td>
+ <td>{{CompatGeckoDesktop(39)}}<sup>[1]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>24</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>add()</td>
+ <td>{{CompatChrome(44.0)}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td>addAll()</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td>matchAll()</td>
+ <td>{{CompatChrome(47.0)}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td>Require HTTPS for <code>add()</code>, <code>addAll()</code>, and <code>put()</code></td>
+ <td>{{CompatChrome(46.0)}}</td>
+ <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</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>Firefox OS</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(39)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(40.0)}}</td>
+ </tr>
+ <tr>
+ <td>add()</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(44.0)}}</td>
+ </tr>
+ <tr>
+ <td>addAll()</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ </tr>
+ <tr>
+ <td>matchAll()</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(46.0)}}</td>
+ </tr>
+ <tr>
+ <td>Require HTTPS for <code>add()</code>, <code>addAll()</code>, and <code>put()</code></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(46.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 Extended Support Release</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><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/cache/keys/index.html b/files/zh-cn/web/api/cache/keys/index.html
new file mode 100644
index 0000000000..10be6eb859
--- /dev/null
+++ b/files/zh-cn/web/api/cache/keys/index.html
@@ -0,0 +1,136 @@
+---
+title: Cache.keys()
+slug: Web/API/Cache/keys
+translation_of: Web/API/Cache/keys
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p> {{domxref("Cache")}} 接口的 <strong><code>keys()</code></strong> 方法返回一个 {{jsxref("Promise")}} ,这个 {{jsxref("Promise")}} 将解析为一个{{domxref("Cache")}} 键的数组。</p>
+
+<p>请求将以它们被插入的顺序返回。</p>
+
+<div class="note">
+<p><strong>注意</strong>: 具有相同URL但不同请求头的请求,如果它们的响应头中有 VARY 头部,则他们可以被返回。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">cache.keys(request,{options}).then(function(keys) {
+ //do something with your array of requests
+});
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>返回一个解析为 {{domxref("Cache")}} 键数组的 {{jsxref("Promise")}}。</p>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>request {{optional_inline}}</dt>
+ <dd>如果一个相关键被指定,则返对应的 {{domxref("Request")}} 。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>一个对象,它的属性决定了 keys 操作中的匹配操作是如何执行的。可选的属性有:
+ <ul>
+ <li><code>ignoreSearch</code>: 一个 {{domxref("Boolean")}} 值,指定了匹配操作是否忽略url中的查询部分。如果为 true ,在执行匹配操作时, <code>http://foo.com/?value=bar</code> 的 <code>?value=bar 部分将会被忽。默认为 </code><code>false 。</code></li>
+ <li><code>ignoreMethod</code>: 一个 {{domxref("Boolean")}} 值,当为 true 时, 将会阻止匹配操作验证 {{domxref("Request")}} 的 HTTP 方法(通常只有 GET 和 HEAD 方法被允许)。默认为 false 。</li>
+ <li><code>ignoreVary</code>: 一个 {{domxref("Boolean")}} 值,当为 <code>true 时,告诉匹配操作不要验证 VARY 头部。换句话说,如果 URL 匹配,你会得到一个匹配而不管</code> {{domxref("Response")}} 对象是否有 VARY 头部。默认为 false 。</li>
+ <li><code>cacheName</code>: 一个 {{domxref("DOMString")}} 值,描述了在一个特定的 cache 中进行匹配。注意这个选项会被 Cache.keys()方法忽略。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="示例" style="line-height: 30px; font-size: 2.14285714285714rem;">示例</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="规范">规范</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', 'Cache')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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 (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+ <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>24</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>Firefox OS</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(39)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 可选参数只支持 <code>ignoreSearch 和</code> <code>cacheName </code>。</p>
+
+<p>[2] Service workers (以及<a href="/en-US/docs/Web/API/Push_API">Push</a>) 在 <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</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/cache/match/index.html b/files/zh-cn/web/api/cache/match/index.html
new file mode 100644
index 0000000000..6670556654
--- /dev/null
+++ b/files/zh-cn/web/api/cache/match/index.html
@@ -0,0 +1,173 @@
+---
+title: Cache.match()
+slug: Web/API/Cache/match
+tags:
+ - Cache.match()
+ - ServiceWorker
+ - match
+ - 实验性的
+translation_of: Web/API/Cache/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("Cache")}} 接口的 <strong><code>match()</code></strong> 方法, 返回一个 {{jsxref("Promise")}} 解析为(resolve to)与 {{domxref("Cache")}} 对象中的第一个匹配请求相关联的{{domxref("Response")}} 。如果没有找到匹配,{{jsxref("Promise")}} 解析为 {{jsxref("undefined")}}。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js notranslate">cache.match(request,{options}).then(function(response) {
+ //操作response
+});
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{jsxref("Promise")}} 对象,该对象解析为第一个匹配请求的 {{domxref("Response")}} 对象,如果没有匹配到,则解析到 {{jsxref("undefined")}} 。</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>Cache.match()</code> 基本上和 {{domxref("Cache.matchAll()")}} 一样, 只不过 <code>Cache.match()</code> 只解析为 <code>response[0]</code> (第一个匹配的响应(response)对象) 而不是 <code>response[]</code> (所有响应对象组成的数组)。</p>
+</div>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>在{{domxref("Cache")}}对象中查找的{{domxref("Request")}}对象对应的response。这个{{domxref("Request")}}可以是 object 或者是一个URL.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>一个为 <code>match</code> 操作设置选项的对象。有效的选项如下:
+ <ul>
+ <li><code>ignoreSearch</code>: 一个 {{domxref("Boolean")}} 值用来设置是否忽略url中的query部分。例如, 如果该参数设置为 <code>true</code> ,那么 <code>http://foo.com/?value=bar中的</code> <code>?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")}} ,代表一个具体的要被搜索的缓存。注意该选项被 <code>Cache.match()</code>方法忽略。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="例子" style="line-height: 30px; font-size: 2.14285714285714rem;">例子</h2>
+
+<p>这个是个来自 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">custom offline page</a> 的例子 (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">live demo</a>)。</p>
+
+<p>下面的例子在请求失败时提供特定的数据。 <code>catch()</code> 在 <code>fetch()</code> 的调用抛出异常时触发。在 <code>catch()</code> 语句中, <code>match()</code>用来返回正确的响应。</p>
+
+<p>在这个例子中,我们决定只缓存通过GET取得的HTML文档. <span style="line-height: 19.0909080505371px;">如果 <code>if()</code> 条件是 false,那么这个fetch处理器就不会处理这个请求。如果还有其他的fetch处理器被注册,它们将有机会调用 <code>event.respondWith()</code> 如果没有fetch处理器调用 <code>event.respondWith()</code> ,该请求就会像没有 service worker 介入一样由浏览器处理。如果 </span><code style="font-style: normal; line-height: 19.0909080505371px;">fetch()</code><span style="line-height: 19.0909080505371px;"> 返回了有效的HTTP响应,相应码是4xx或5xx,那么</span><code style="font-style: normal; line-height: 19.0909080505371px;">catch()</code><span style="line-height: 19.0909080505371px;"> 就<strong>不会</strong>被调用。</span></p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', function(event) {
+ // 我们只想在用GET方法请求HTML文档时调用 event.respondWith()。
+ if (event.request.method === 'GET' &amp;&amp;
+ event.request.headers.get('accept').indexOf('text/html') !== -1) {
+ console.log('Handling fetch event for', event.request.url);
+ event.respondWith(
+ fetch(event.request).catch(function(e) {
+ console.error('Fetch failed; returning offline page instead.', e);
+ return caches.open(OFFLINE_CACHE).then(function(cache) {
+ return cache.match(OFFLINE_URL);
+ });
+ })
+ );
+ }
+});</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', 'Cache')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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 (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(40.0)}} [1]</td>
+ <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOpera(24)}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>All options supported</td>
+ <td>{{CompatChrome(54.0)}}</td>
+ <td></td>
+ <td></td>
+ <td>{{CompatOpera(41)}}</td>
+ <td></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>Firefox OS</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(39)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatChrome(40.0)}} [1]</td>
+ </tr>
+ <tr>
+ <td>All options supported</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td>{{CompatOperaMobile(41)}}</td>
+ <td></td>
+ <td>{{CompatChrome(54.0)}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] The options parameter only supports <code>ignoreSearch</code>, and <code>cacheName</code>. </li>
+ <li>[2] 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.)</li>
+</ul>
+
+<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/cache/matchall/index.html b/files/zh-cn/web/api/cache/matchall/index.html
new file mode 100644
index 0000000000..bfb069914d
--- /dev/null
+++ b/files/zh-cn/web/api/cache/matchall/index.html
@@ -0,0 +1,82 @@
+---
+title: Cache.matchAll()
+slug: Web/API/Cache/matchAll
+translation_of: Web/API/Cache/matchAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("Cache")}} 接口的 <strong><code>matchAll()</code></strong> 方法返回一个 {{jsxref("Promise")}} ,其 resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">cache.matchAll(request,{options}).then(function(response) {
+ //do something with the response array
+});
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{jsxref("Promise")}},resolve为 {{domxref("Cache")}} 对象中所有匹配请求的数组。</p>
+
+<div class="note">
+<p><strong>注意</strong>: {{domxref("Cache.match()")}} 基本上与<code>Cache.matchAll()</code> 相同,除了它 resolve 为 <code>response[0]</code> (即第一个匹配响应) 而不是 <code>response</code> (数组中所有匹配的响应)。</p>
+</div>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>request {{optional_inline}}</dt>
+ <dd>{{domxref("Cache")}} 中你尝试查找的The {{domxref("Request")}} . 如果忽略这一参数,你将获取到cache中所有 <code>response</code> 的副本。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>一个选项对象,允许你为 <code>match</code> 操作中要做的匹配设置特定控制选项。可用选项包括:
+ <ul>
+ <li><code>ignoreSearch</code>: 一个 {{domxref("Boolean")}} 值用来设置匹配操作是否忽略url中的query部分。如果该参数设置为 <code>true</code> ,那么 <code>http://foo.com/?value=bar</code> 中的 <code>?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")}} ,代表一个具体的要被搜索的缓存。注意该选项被<strong><code>Cache.matchAll()</code></strong>方法忽略。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="示例" style="line-height: 30px; font-size: 2.14285714285714rem;">示例</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="规范">规范</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', '#dom-cache-matchall', 'Cache: matchAll')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Cache.matchAll")}}</p>
+</div>
+
+<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/cache/put/index.html b/files/zh-cn/web/api/cache/put/index.html
new file mode 100644
index 0000000000..24974d98fc
--- /dev/null
+++ b/files/zh-cn/web/api/cache/put/index.html
@@ -0,0 +1,109 @@
+---
+title: Cache.put()
+slug: Web/API/Cache/put
+translation_of: Web/API/Cache/put
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">{{domxref("Cache")}} 接口的  <strong><code>put()</code></strong> 方法 允许将键/值对添加到当前的 {{domxref("Cache")}} 对象中.</span></p>
+
+<p><span class="seoSummary">通常,你只想 </span>{{domxref("GloblFetch.fetch","fetch()")}} 一个或多个请求,然后直接添加结果到cache中。这种情况下,最好使用 {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}},因为它们是一个或者多个这些操作的便捷方法。</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> 将覆盖先前存储在匹配请求的cache中的任何键/值对。</p>
+</div>
+
+<div class="note">
+<p><strong>注意</strong>: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不会缓存 <code>Response.status</code> 值不在200范围内的响应,而 {{domxref("Cache.put")}} 允许你存储任何请求/响应对。因此,{{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不能用于不透明的响应,而 {{domxref("Cache.put")}} 可以。</p>
+</div>
+
+<div class="note">
+<p><strong>注意</strong>: 当响应主体完全写入磁盘时,初始Cache执行 (在 Blink 和 Gecko中) resolve {{domxref("Cache.add")}}、{{domxref("Cache.addAll")}} 和 {{domxref("Cache.put")}} promise.  更新的规范版本中声明:即使响应主体仍在流式传输,一旦条目被记录到数据库中,浏览器就可以 resolve promise.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">cache.put(request, response).then(function() {
+ // request/response pair has been added to the cache
+});
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>The {{domxref("Request")}} you want to add to the cache.</dd>
+ <dt>response</dt>
+ <dd>The {{domxref("Response")}} you want to match up to the request.</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>A {{jsxref("Promise")}} that resolves with void.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The promise will reject with a <code>TypeError</code> if the URL scheme is not <code>http</code> or <code>https</code>.</p>
+</div>
+
+<h2 id="示例" style="line-height: 30px; font-size: 2.14285714285714rem;">示例</h2>
+
+<p>This example is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Here we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:</p>
+
+<ol>
+ <li>Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that.</li>
+ <li>If not, open the <code>v1</code> cache using <code>open()</code>, put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using <code>return response.clone()</code>. Clone is needed because <code>put()</code> consumes the response body.</li>
+ <li>If this fails (e.g., because the network is down), return a fallback response.</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="规范">规范</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', 'Cache')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Cache.put")}}</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>