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
|
---
title: Cache
slug: Web/API/Cache
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 доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определён в их спецификации.</p>
<p>Для вызывающего скрипта может быть множество именованных объектов <code>Cache</code>. Разработчик сам определяет реализацию того, как скрипт (например, в {{domxref("ServiceWorker")}}) управляет обновлением <code>Cache</code>. Записи в <code>Cache</code> не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечёт до момента удаления. Используйте {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}, чтобы открыть определённый именованный объект <code>Cache </code>и затем вызывайте любые методы<code> Cache </code>для управления его состоянием.</p>
<p>Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жёсткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удаляет ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Удаление старого кеша</a>.</p>
<div class="note">
<p><strong>Замечание</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}} и {{domxref("Cache.addAll")}} допускают сохранение в кеш только <code>GET</code> запросов.</p>
</div>
<div class="note">
<p><strong>Замечание</strong>: Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}} и {{domxref("Cache.put")}}, когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все ещё загружается в потоке.</p>
</div>
<div class="note">
<p><strong>Замечание:</strong> Начиная с Chrome 46, Cache API будут хранить запросы только от безопасных источников, то есть, доступных через HTTPS.</p>
</div>
<div class="note">
<p><strong>Замечание</strong>: Алгоритм сопоставления ключей зависит от заголовка <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">VARY</a> хранимого значения. Таким образом, сопоставление нового ключа требует одновременно как проверки самого ключа, так и значений для записей в Cache.</p>
</div>
<div class="note">
<p><strong>Замечание:</strong> Кеширующие API не приветствуют заголовки кеширования HTTP.</p>
</div>
<h2 id="Методы">Методы</h2>
<dl>
<dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
<dd>Возвращает {{jsxref("Promise")}}, который успешно завершается с нахождением первого совпадения для данного запроса в объекте {{domxref("Cache")}}.</dd>
<dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
<dd>Возвращает {{jsxref("Promise")}}, который успешно завершается и возвращает массив всех найденных совпадений для данного запроса в объекте {{domxref("Cache")}}.</dd>
<dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
<dd>Принимает в качестве параметра URL, получает данные по нему и добавляет полученный объект ответа в заданный кеш. Функциональный эквивалент вызову fetch() с последующим вызовом Cache.put() для добавления результата в кеш.</dd>
<dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
<dd>Принимает массив URL в качестве параметра, получает данные по ним, добавляет полученные объекты ответов в заданный кеш.</dd>
<dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
<dd>Принимает запрос и ответ на него и добавляет их в заданный кеш.</dd>
<dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
<dd>Находит запись {{domxref("Cache")}}, чей ключ является запросом, и, в случае нахождения, удаляет запись {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, успешно завершающийся со значением <code>true</code>. Если же запись {{domxref("Cache")}} не найдена, возвращается <code>false</code>.</dd>
<dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
<dd>Возвращает {{jsxref("Promise")}}, который отдаёт массив ключей {{domxref("Cache")}}.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<p>Этот пример кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">примера выборочного кеширования сервис воркера</a>. (смотрите <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">работа выборочного кеширования</a>). В коде используется {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} для открытия любых объектов {{domxref("Cache")}} с заголовком Content-Type, начинающимся с <code>font/</code>.</p>
<p>Далее используется {{domxref("Cache.match", "Cache.match(request, options)")}} для определения того, находится ли уже совпадающий шрифт в кеше, и, если так, то возвращает его. Если же совпадающего шрифта нет, код получает этот шрифт по сети и использует {{domxref("Cache.put","Cache.put(request, response)")}} для кеширования полученного ресурса.</p>
<p>Код обрабатывает исключения, возможные при операции {{domxref("Globalfetch.fetch","fetch()")}}. Заметьте, что HTTP-ответ с ошибкой (например, 404) не будет вызывать исключения. Будет возвращён нормальный объект ответа с установленным соответствующим кодом ошибки.</p>
<p>Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращённый идентификатор кеша с определённым, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имя <code>CURRENT_CACHES</code>.</p>
<p>В примере кода "кеш" это атрибут WorkerGlobalScope сервис воркеров. Он содержит объект CacheStorage, через который можно получить доступ к <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage">CacheStorage</a> API.</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 не разрешится успешно.
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(
// Открывает объекты Cache, начинающиеся с 'font'.
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">Спецификация</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>
<p>{{Compat("api.Cache")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Сервис Воркеров</a></li>
<li><a class="external external-icon" href="https://github.com/mdn/sw-test">Базовый пример кода для Сервис воркеров</a></li>
<li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли Сервис Воркер?</a></li>
<li>{{jsxref("Promise")}}</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование web воркеров</a></li>
</ul>
|
