1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: Cache.match()
slug: Web/API/Cache/match
translation_of: Web/API/Cache/match
---
<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
<p>Метод <strong><code>match()</code></strong> интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в {{domxref("Response")}}, ассоциированный с первым совпадающим запросом в объекте {{domxref("Cache")}}. Если совпадений не найдено, {{jsxref("Promise")}} разрешается в {{jsxref("undefined")}}.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: js">cache.match(request,{options}).then(function(response) {
//сделать что-нибудь с ответом
});
</pre>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>{{jsxref("Promise")}}, который разрешается в первый {{domxref("Response")}}, который совпадает с запросом или в {{jsxref("undefined")}}, если совпадений не найдено.</p>
<div class="note">
<p><strong>Замечание</strong>: <code>Cache.match()</code> в основном идентичен {{domxref("Cache.matchAll()")}}, за исключением того, что <code>Cache.match()</code> разрешается в <code>response[0]</code> (первый совпадающий ответ) вместо <code>response[]</code> (массив со всеми совпадающими ответами).</p>
</div>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt>request</dt>
<dd>Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.</dd>
<dt>options {{optional_inline}}</dt>
<dd>Объект, который задает параметры для операции <code>match</code>. Допустимые значения:
<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>, предотвращает проверку <code>http</code> метода для запроса {{domxref("Request")}} при выполнении сопоставлений ключа (обычно разрешены лишь <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>
<p>В Chrome поддерживается лишь <code>cacheName</code>.</p>
</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">пользовательская оффлайн страница</a> (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">живой пример</a>).</p>
<p>Следующий пример использует кеш для предоставления данных, когда запрос не удался. Выражение <code>catch()</code> выполняется когда вызов <code>fetch()</code> возбуждает исключение. Внутри выражения <code>catch()</code>, <code>match()</code> используется для возврата корректного ответа.</p>
<p>В этом примере, мы решили что кешироваться будут лишь HTML-документы полученные с помощью GET-запроса. <span style="line-height: 19.0909080505371px;">Если условие <code>if()</code> равно false, то обработчик не будет вмешиваться в ответ. Если зарегистрированы другие обработчики получения данных, то у них будет шанс вызвать <code>event.respondWith()</code>. Если ни один из обработчиков не вызовет <code>event.respondWith()</code>, запрос будет обработан браузером, как это было бы сделано без участия сервис воркера. Если </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;"> не будет вызван. </span></p>
<pre class="brush: js">self.addEventListener('fetch', function(event) {
// Мы хотим выполнить лишь event.respondWith() если это GET-запрос HTML-документа.
if (event.request.method === 'GET' &&
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">Спецификация</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>Базовая поддержка</td>
<td>{{CompatChrome(40.0)}} [1]</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>Базовая поддержка</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)}} [1]</td>
</tr>
</tbody>
</table>
</div>
<ul>
<li>[1] Параметр options поддерживает только <code>ignoreSearch и</code> <code>cacheName</code>. </li>
<li>[2] Сервис воркеры (и <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.)</li>
</ul>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
<li>{{domxref("Cache")}}</li>
<li>{{domxref("WorkerGlobalScope.caches")}}</li>
</ul>
|
