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
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.