---
title: Service Worker API
slug: Web/API/Service_Worker_API
tags:
  - API
  - Landing
  - NeedsTranslation
  - Offline
  - Overview
  - Reference
  - Service Workers
  - TopicStub
  - Workers
translation_of: Web/API/Service_Worker_API
---
<div>
<p>{{ServiceWorkerSidebar}}</p>

<p class="summary">Service worker фактически выполняет роль прокси-сервера, находящегося между веб-приложением и браузером, а также сетью (если доступна). Он позволяет (кроме прочего) описывать корректное поведение веб-приложения в режиме офлайн, перехватывать запросы сети и принимать соответствующие меры, основываясь на доступности сети, и обновлять данные, находящиеся на сервере при доступе к нему. Также они имеют доступ к push-уведомлениям и API для фоновой синхронизации.</p>
</div>

<h2 id="Концепция_и_использование_Service_Worker">Концепция и использование Service Worker</h2>

<p>Service worker — это событийно-управляемый <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a>, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).</p>

<p>Service worker запускается в контексте worker'ов, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>, в Service Worker'е использовать нельзя.</p>

<p>Из соображений безопасности service worker'ы работают только по HTTPS (либо, в целях разработки, на <code>localhost</code>). Давать сторонним людям возможность измененять сетевые запросы крайне опасно. Кроме того, Service Worker API недоступен в <a href="https://support.mozilla.org/ru/kb/privatnyj-prosmotr-prosmotr-veb-stranic-bez-sohran">режиме приватного просмотра</a> браузера Firefox.</p>

<div class="note">
<p><strong>Заметка</strong>: Service Worker'ы выигрывают у предыдущих решений, таких как <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache,</a> потому что не делают предположений о том, что вы пытаетесь сделать, и не ломаются, в случаях если их предположения не оказываются верными; вы имеете полный контроль над всем.</p>
</div>

<div class="note">
<p><strong>Заметка</strong>: Service worker'ы широко используют промисы (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>). В общем случае они будут ждать ответа, после которого вернутся с успешным или неудачным завершением. Архитектура на промисах для этого подоходит идеально.</p>
</div>

<h3 id="Регистрация">Регистрация</h3>

<p>Service worker сначала регистрируется с помощью метода {{domxref("ServiceWorkerContainer.register()")}}. В случае успешной регистрации, service worker будет загружен клиентом и попытается установиться/активироваться (см. ниже) для всех URL, доступных пользователю, или только для указанного вами подмножества.</p>

<h3 id="Загрузка_установка_и_активация">Загрузка, установка и активация</h3>

<p>Service Worker будет следовать следующему жизненному циклу:</p>

<ol>
 <li>Загрузка</li>
 <li>Установка</li>
 <li>Активация</li>
</ol>

<p>Когда пользователь впервые запросит доступ к сайту/странице, контролируемой Service Worker'ом, тот моментально будет загружен .</p>

<p>После этого он будет загружаться каждые 24 часа или около того. Он <em>может</em> загружаться и чаще, но он <strong>должен</strong> загружаться как минимум каждые 24 часа, чтобы предотвратить использование старой версии кода клиентом.</p>

<p>Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service worker'ом для этой страницы/сайта.</p>

<p>Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного ее завершения — активация.</p>

<p>Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние <em>в ожидании</em>. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет <em>активным worker'ом</em>). Активация может произойти раньше при использовании {{domxref ("ServiceWorkerGlobalScope.skipWaiting()")}}, а существующие страницы могут быть переведены под контроль активного воркера с помощью {{domxref ("Clients.claim()")}}.</p>

<p>Вы можете подписаться на {{domxref("InstallEvent")}}; для того чтобы подготовить ваш service worker к использованию, к примеру, чтобы создать кеш при помощи встроенного API хранилища и разместить внутри него данные, которые вам необходимы в вашем приложении для работы офлайн.</p>

<p>Есть также событие <code>activate</code>. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.</p>

<p>Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на свое усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.</p>

<div class="note">
<p><strong>Заметка</strong>: Так как выполнение <code>oninstall</code>/<code>onactivate</code> может занять время, спецификация service worker предоставляет метод <code>waitUntil</code>, который возвращает промис, когда вызывается <code>oninstall</code> или <code>onactivate</code>. Функциональные события не отправляются service worker, пока промис не завершится успешно.</p>
</div>

<p>Для полного руководства по созданию рабочего примера читайте <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Worker</a>.</p>

<h2 id="Другие_варианты_использования">Другие варианты использования</h2>

<p>Service worker'ы также предназначены для таких вещей, как:</p>

<ul>
 <li>Фоновая синхронизация данных</li>
 <li>Ответ на запросы от других источников</li>
 <li>Получение централизованного обновления для данных использующих тяжелые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные</li>
 <li>Компиляция и управление зависимостями на клиентской стороне для CoffeeScript, less, CJS/AMD модулей и т.д. для целей разработки</li>
 <li>Подписка на фоновые сервисы</li>
 <li>Кастомная шаблонизация, основанная на определённых паттернах URL</li>
 <li>Улучшение производительности, с помощью предварительной загрузки ресурсов, которые понадобятся пользователю в ближайшем будущем, например несколько последующих картинок в фотоальбоме.</li>
</ul>

<p>В будущем service worker'ы будут способны на многие другие полезные вещи для веб-платформ, приближая их к нативным приложеням. Примечательно, что другие спецификации могут и будут использовать контекст service worker, к примеру для:</p>

<ul>
 <li><a href="https://github.com/slightlyoff/BackgroundSync">Фоновой синхронизации</a>: запускать service worker даже когда ни одного пользователя нет на сайте, чтобы обновить кеш.</li>
 <li><a href="/en-US/docs/Web/API/Push_API">Реакции на пуш-сообщения</a>: запускать service worker для отправки сообщений пользователям, чтобы оповестить их о новом доступном контенте.</li>
 <li>Реакции на определенное время и дату</li>
 <li>Введение гео-ограничений</li>
</ul>

<h2 id="Интерфейс">Интерфейс</h2>

<dl>
 <dt>{{domxref("Cache") }}</dt>
 <dd>Представляет хранилище для объектов {{domxref("Request")}} / {{domxref("Response")}}, которые кешируются, как часть жизненного цикла {{domxref("ServiceWorker")}}.</dd>
 <dt>{{domxref("CacheStorage") }}</dt>
 <dd>Представляет хранилище для объектов {{domxref("Cache")}}. Он создает главную директорию для всех именовынных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имен соответствующего объекта {{domxref("Cache")}}.</dd>
 <dt>{{domxref("Client") }}</dt>
 <dd>Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо {{domxref("SharedWorker")}}, который контролируется активным worker'ом.</dd>
 <dt>{{domxref("Clients") }}</dt>
 <dd>Представлет контейнер для списка объектов {{domxref("Client")}}; основной способ получить доступ к клиентам активного service worker'а текущего источника.</dd>
 <dt>{{domxref("ExtendableEvent") }}</dt>
 <dd>Расширяет жизненный цикл событий <code>install</code> и <code>activate</code>, отправляемых {{domxref("ServiceWorkerGlobalScope")}} как часть жизненного цикла service worker'а. Это гарантирует, что любое функциональное событие (как {{domxref("FetchEvent")}}) не отправится в {{domxref("ServiceWorker")}}, пока он не обновит шаблон данных, удалив устаревшие данные кеша.</dd>
 <dt>{{domxref("ExtendableMessageEvent") }}</dt>
 <dd>Обект событий {{event("message_(ServiceWorker)","message")}} запускается в service worker (когда канал сообщений в {{domxref("ServiceWorkerGlobalScope")}} получил новое сообщение из другого контекста) — расширяет жизненный цикл таких событий.</dd>
 <dt>{{domxref("FetchEvent") }}</dt>
 <dd>Параметр, передающийся в обработчик {{domxref("ServiceWorkerGlobalScope.onfetch")}}, <code>FetchEvent</code> представляет собой событие получения, которое отправляется в  {{domxref("ServiceWorkerGlobalScope")}} {{domxref("ServiceWorker")}}. Он содержит информацию о запросе и результирующем ответе и обеспечивает {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} метод, который позволяет отправить произвольный ответ обратно контролируемой странице.</dd>
 <dt>{{domxref("InstallEvent") }}</dt>
 <dd>Параметр, передющийся в  {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} обработчик, <code>InstallEvent</code> представляет сообой событие установки, которое отправляется {{domxref("ServiceWorkerGlobalScope")}} {{domxref("ServiceWorker")}}. Как наследник {{domxref("ExtendableEvent")}}, он гарантирует, что функциональные события, такие как {{domxref("FetchEvent")}}, не будут отправлены во время установки. </dd>
 <dt>{{domxref("Navigator.serviceWorker") }}</dt>
 <dd>Возвращает объект {{domxref("ServiceWorkerContainer")}}, который обеспечивает доступ к регистрации, удалению, обновлению и коммуникации с объектами {{domxref("ServiceWorker")}}<a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">ассоциируемого документа</a>.</dd>
 <dt>{{domxref("NotificationEvent") }}</dt>
 <dd>Параметр, передаваемый в обработчик {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, интерфейс <code>NotificationEvent</code> представляет событие уведомления на клик, которое отправлется в {{domxref("ServiceWorkerGlobalScope")}} service worker'а.</dd>
 <dt>{{domxref("ServiceWorker") }}</dt>
 <dd>Представляет service worker. Несколько контекстов браузера (страницы, worker'ы, и т.д.) могут быть ассоциированы с одним объектом <code>ServiceWorker</code>.</dd>
 <dt>{{domxref("ServiceWorkerContainer") }}</dt>
 <dd>Предоставляет объект, описывающий service worker как общий блок в экосистеме сети, включая возможность регистрировать, отключать и обновлять service worker'ы, и предоставляет доступ к состоянию текущего и других зарагестрованных service worker'ов.</dd>
 <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt>
 <dd>Представляет глобальный контекст исполнения service worker'а.</dd>
 <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt>
 <dd>Содержит информацию о событии, отправленном целевому  {{domxref("ServiceWorkerContainer")}}. </dd>
 <dt>{{domxref("ServiceWorkerRegistration") }}</dt>
 <dd>Представляет регистрацию service worker'а.</dd>
 <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
 <dd>
 <p>SyncEvent предсталяет синхронное действие, котрое отправляется {{domxref("ServiceWorkerGlobalScope")}} ServiceWorker. </p>
 </dd>
 <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
 <dd>Обеспечивает интерфейс регистрации и перечисления синхронных рагистраций.</dd>
 <dt>{{domxref("WindowClient") }}</dt>
 <dd>Предствляет область видимости клинетского service worker'а, представленного в виде документа в контекте браузера, контролируемого активным worker'ом. Это особый тип объекта {{domxref("Client")}} с некоторыми дополнительными методами и свойствами.</dd>
</dl>

<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')}}</td>
   <td>{{Spec2('Service Workers')}}</td>
   <td>Изначальное определение.</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость">Совместимость</h2>

<h4 id="Таблица_совместимости"><strong>Таблица совместимости</strong></h4>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Свойства</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)}}</td>
   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
   <td>{{ CompatNo() }}</td>
   <td>24</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>События установки/активации</td>
   <td>{{ CompatChrome(40.0) }}</td>
   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>Событие fetch/request/<br>
    <code>respondWith()</code></td>
   <td>{{CompatChrome(40.0)}}</td>
   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>Кеш</td>
   <td>
    <p class="p1">{{CompatChrome(42.0)}}</p>
   </td>
   <td>{{ CompatGeckoDesktop("39.0") }}<sup>[1]</sup></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</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>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td></td>
   <td>{{CompatChrome(40.0)}}</td>
   <td>{{ CompatGeckoMobile("44.0") }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>События установки/активации</td>
   <td>{{ CompatNo() }}</td>
   <td>{{CompatChrome(40.0)}}</td>
   <td>{{ CompatGeckoMobile("44.0") }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>Событие fetch/request/<br>
    <code>respondWith()</code></td>
   <td>{{ CompatNo() }}</td>
   <td>{{CompatChrome(40.0)}}</td>
   <td>{{ CompatGeckoMobile("44.0") }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>Кеш</td>
   <td>{{ CompatNo() }}</td>
   <td>{{CompatChrome(40.0)}}</td>
   <td>{{ CompatGeckoMobile("39.0") }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] 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://serviceworke.rs">ServiceWorker </a></li>
 <li>Использование<a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers"> Service Workers</a></li>
 <li>Основные примеры кода <a href="https://github.com/mdn/sw-test">Service workers</a></li>
 <li>Готов ли <a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker?</a></li>
 <li>Перспектива</li>
 <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
</ul>