ServiceWorker.onstatechange

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

statechange 타입의 이벤트가 발생될 때마다 호출되는 EventListener 속성. 기본적으로 ServiceWorker.state가 변경되는 시점에 발생한다.

Syntax

ServiceWorker.onstatechange = function(statechangeevent) { ... }
ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )

Examples

이 코드 조각은 service worker registration-events sample (live demo) 으로부터 가져온 것이다. 이 코드는 ServiceWorker.state의 모든 변경 사항을 수신하고 그 값을 반환한다.

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);
  });
}

statechange 가 발생할 때, 서비스워커의 참조들이 변화할 수 있으므로 주의하라. 예시:

navigator.serviceWorker.register(..).then(function(swr) {
  swr.installing.state == "installing"
  swr.installing.onstatechange = function() {
    swr.installing == null;
    // 이 시점에서, swr.waiting 또는 swr.active는 true일 것이다. 이것은 statechange 이벤트가 대기 상태이기 때문이며, 
    // 그동안 잠재 상태의 워커가 waiting 상태가 될 수도 있으며 가능한 경우에는 즉시 activated 될 것이다.
  }
})

Specifications

Specification Status Comment
Service Workers
The definition of 'ServiceWorker.onstatechange' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
onstatechange
Experimental
Chrome Full support 40Edge Full support 17
Full support 17
Full support 16
Disabled
Disabled From version 16: this feature is behind the Enable service workers preference.
Firefox Full support 44
Notes
Full support 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
IE No support NoOpera Full support 27Safari Full support 11.1WebView Android Full support 40Chrome Android Full support 40Firefox Android Full support 44Opera Android Full support 27Safari iOS Full support 11.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.