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
|
---
title: CacheStorage
slug: Web/API/CacheStorage
tags:
- API
- CacheStorage
- Experimental
- Interface
- NeedsTranslation
- Reference
- Service Workers
- ServiceWorker
- TopicStub
translation_of: Web/API/CacheStorage
---
<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
<p>Интерфейс <strong><code>CacheStorage</code></strong> представляет собой хранилище для объектов {{domxref("Cache")}}. Он предоставляет главную директорию всех именованных кешей, к которым могут получить доступ {{domxref("ServiceWorker")}}, другие типы воркеров или {{domxref("window")}} (вы не обязаны использовать их с 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")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом <code>CacheStorage</code>.</p>
<p>Вы можете получить доступ к <code>CacheStorage</code> через глобальное свойство {{domxref("WorkerGlobalScope.caches", "caches")}}.</p>
<div class="note"><strong>Примечание</strong>: CacheStorage всегда возвращает отказ с <code>SecurityError</code> для ненадёжных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.</div>
<div class="note"><strong>Примечание</strong>: {{domxref("CacheStorage.match()")}} удобный метод. Подобная функциональность сопоставления записей кеша может быть реализован путём открытия вашего кеша с помощью {{domxref("CacheStorage.open()")}}, возвращения записей, в ней содержащихся, через {{domxref("CacheStorage.keys()")}} и сравнения необходимой {{domxref("CacheStorage.match()")}}.</div>
<h2 id="Методы">Методы</h2>
<dl>
<dt>{{domxref("CacheStorage.match()")}}</dt>
<dd>Проверяет, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом {{domxref("CacheStorage")}}, и возвращает {{jsxref("Promise")}}, который успешно завершится, когда найдёт совпадение.</dd>
<dt>{{domxref("CacheStorage.has()")}}</dt>
<dd>Возвращает {{jsxref("Promise")}}, который успешно завершится и вернёт <code>true,</code> если объект {{domxref("Cache")}} содержит кеш с установленным <code>cacheName</code>.</dd>
<dt>{{domxref("CacheStorage.open()")}}</dt>
<dd>Возвращает {{jsxref("Promise")}}, который успешно завершится, когда объект {{domxref("Cache")}} найдёт необходимый объект с <code>cacheName</code> (если такого нет, то создаст новый).</dd>
<dt>{{domxref("CacheStorage.delete()")}}</dt>
<dd>Находит объект {{domxref("Cache")}}, соответствующий <code>cacheName</code>, и, если такой обнаружен, удаляет объект {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, завершающийся с <code>true</code>. Если объект {{domxref("Cache")}} не найдёт, то возвращается <code>false</code>.</dd>
<dt>{{domxref("CacheStorage.keys()")}}</dt>
<dd>Возвращает {{jsxref("Promise")}}, который вернёт массив, содержащий строки, соответствующие всем именованным объектам {{domxref("Cache")}}, отслеживаемым {{domxref("CacheStorage")}}. Используйте этот метод для прохода по списку всех объектов {{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")}} для создания нового кеша и затем использует {{domxref("Cache.addAll")}} для добавления к нему списка ресурсов.</p>
<p>Во втором блоке кода мы ждём запуска события {{domxref("FetchEvent")}}. Мы создаём встроенный ответ:</p>
<ol>
<li>Проверяем, был ли необходимый запрос найден в CacheStorage. Если да, выполняем его.</li>
<li>Если нет, получаем запрос от сети, затем так же открываем кеш, созданный в первом блоке, и добавляем клон запроса в него, используя {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</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">Спецификация</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>{{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>
|
