---
title: ServiceWorker.onstatechange
slug: Web/API/ServiceWorker/onstatechange
translation_of: Web/API/ServiceWorker/onstatechange
---
<div>{{APIRef("Service Workers API")}}</div>

<p>Обработчик события, вызываемый при срабатывании события <code>statechange</code>; по сути, срабатывает при изменении {{domxref("ServiceWorker.state")}}.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">ServiceWorker.onstatechange = function(statechangeevent) { ... }
ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )</pre>

<h2 id="Примеры">Примеры</h2>

<p>Данный фрагмент кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">примера событий service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">демо</a>) возвращает состояние при каждом его изменении.</p>

<pre class="brush: js">var serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector('#kind').textContent = 'installing';
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector('#kind').textContent = 'waiting';
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector('#kind').textContent = 'active';
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener('statechange', function(e) {
  logState(e.target.state);
  });
}</pre>

<p>Обратите внимание, что при срабатывании <code>statechange</code>, ссылки на service worker могли измениться. Например:</p>

<pre class="brush: js">navigator.serviceWorker.register(..).then(function(swr) {
  swr.installing.state == "installing"
  swr.installing.onstatechange = function() {
    swr.installing == null;
    // At this point, swr.waiting OR swr.active might be true. This is because the statechange
    // event gets queued, meanwhile the underlying worker may have gone into the waiting
    // state and will be immediately activated if possible.
  }
})</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', '#dom-serviceworker-onstatechange', 'ServiceWorker.onstatechange')}}</td>
   <td>{{Spec2('Service Workers')}}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

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

<div>


<p>{{Compat("api.ServiceWorker.onstatechange")}}</p>
</div>