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
|
---
title: CacheStorage.match()
slug: Web/API/CacheStorage/match
tags:
- API
- CacheStorage
- Service Workers
- Service worker API
- ServiceWorker
- match
- Экспериментальная функция
translation_of: Web/API/CacheStorage/match
---
<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
<p><span class="seoSummary">Метод <strong><code>match()</code></strong> интерфейса {{domxref("CacheStorage")}} (доступный через глобальное свойство <code>caches</code>) проверяет является ли данный {{domxref("Request")}} или строка url ключом для какого-либо хранимого {{domxref("Response")}}. Метод возвращает {{jsxref("Promise")}} если {{domxref("Response")}} найден, или <code>undefined</code> если нет ни одного совпадения.</span></p>
<p>Объекты Cache проверяются в порядке создания.</p>
<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()", "caches.match()")}} это метод для удобства в работе. Такая функциональность достигается вызовом {{domxref("cache.match()")}} для каждого объекта cache (в порядке полученном запросом {{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>) {
// Какие-либо действия с 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>, предотвращает проверку <code>http</code> метода запроса {{domxref("Request")}} (обычно разрешены только <code>GET</code> и <code>HEAD</code>.) По умолчанию установлено <code>false</code>.</li>
<li><code>ignoreVary</code>: {{domxref("Boolean")}} свойство, определяющее, следует ли выполнять проверку заголовка <code>VARY.</code> Если установлено <code>true</code>, совпадения будут найдены, независимо от того, имеет ли {{domxref("Response")}} заголовок <code>VARY</code> или нет. По умолчанию установлено <code>false</code>.</li>
<li><code>cacheName</code>: Строка {{domxref("DOMString")}} - имя кэша для поиска.</li>
</ul>
</dd>
</dl>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>Метод возвращает {{jsxref("Promise")}} который разрешается совпавшим {{domxref("Response")}}. Если ни одного совпадений не было найдено, promise разрешается с <code>undefined</code>.</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")}} используя {{domxref("CacheStorage.match","CacheStorage.match()")}}. Если совпадение найдено, возвращаем response.</li>
<li>Если нет, открываем <code>v1</code> объект кэша, используя метод <code>open()</code>, добавляем изначальный запрос в кэш используя {{domxref("Cache.put","Cache.put()")}} и возвращаем клонированный объект запроса, используя <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', '#dom-cachestorage-match', 'CacheStorage: match')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы желаете содействовать в уточнении данных, пожалуйста, посетите репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте pull request.</div>
<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">Использование Service Workers</a></li>
<li>{{domxref("Cache")}}</li>
<li>{{domxref("WorkerGlobalScope.caches", "self.caches")}}</li>
</ul>
|
