1 files changed, 61 insertions, 0 deletions
diff --git a/files/ru/web/api/serviceworker/statechange_event/index.html b/files/ru/web/api/serviceworker/statechange_event/index.html
new file mode 100644
index 0000000000..b03607e229
--- /dev/null
+++ b/files/ru/web/api/serviceworker/statechange_event/index.html
@@ -0,0 +1,61 @@
+---
+title: ServiceWorker.onstatechange
+slug: Web/API/ServiceWorker/statechange_event
+translation_of: Web/API/ServiceWorker/onstatechange
+original_slug: 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>
+
+{{Specifications}}
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>
+
+
+<p>{{Compat}}</p>
+</div>