ServiceWorker

Service Worker APIServiceWorker 인터페이스는 서비스 워커로의 참조를 제공합니다. 다수의 브라우징 맥락(e.g. 페이지, 다른 워커, 등등)는 고유한 ServiceWorker 객체를 통해 동일한 서비스 워커와 연결할 수 있습니다.

ServiceWorker 객체는 ServiceWorkerRegistration.active 속성과 ServiceWorkerContainer.controller (en-US) 속성으로 접근할 수 있습니다. controller는 활성화되어 페이지를 통제 중인 서비스 워커입니다.

ServiceWorker 인터페이스에서는 일련의 생명주기 이벤트(install, activate)와 기능 이벤트(fetch)가 발생합니다. ServiceWorker 객체의 생명주기는 ServiceWorker.state (en-US) 속성이 담고 있습니다.

속성

ServiceWorker 인터페이스는 부모 Worker에서 속성을 상속합니다.

ServiceWorker.scriptURL (en-US) 읽기 전용

Returns the ServiceWorker serialized script URL defined as part of ServiceWorkerRegistration (en-US). The URL must be on the same origin as the document that registers the ServiceWorker.

ServiceWorker.state (en-US) 읽기 전용

Returns the state of the service worker. It returns one of the following values: installing, installed, activating, activated, or redundant.

이벤트 처리기

ServiceWorker.onstatechange 읽기 전용

An EventListener property called whenever an event of type statechange is fired; it is basically fired anytime the ServiceWorker.state (en-US) changes.

메서드

ServiceWorker 인터페이스는 부모 Worker에서 메서드를 상속합니다. 단, Worker.terminate()는 예외이며 서비스 워커에서 접근할 수 없습니다.

예제

This code snippet is from the service worker registration-events sample (live demo). The code listens for any change in the ServiceWorker.state (en-US) and returns its value.

js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", {
      scope: "./",
    })
    .then(function (registration) {
      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);
        });
      }
    })
    .catch(function (error) {
      // Something went wrong during registration. The service-worker.js file
      // might be unavailable or contain a syntax error.
    });
} else {
  // The current browser doesn't support service workers.
}

명세

Specification
Service Workers
# serviceworker-interface

브라우저 호환성

BCD tables only load in the browser

같이 보기