Service Worker 설치 사이클

1. 앱에서 register 하기
2. 설치 중일 떄 : install event
3. 활성화 되면 : activate event

register 하기

// 앱에서
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/serviceworker.js")
}

앱 쪽에서 다음과 같이 적어주면 Service Worker 파일을 register 할 수 있다.

install 이벤트

register가 되고나면 Service Worker 쪽에서 install 이벤트가 트리거 된다고 한다.

install 이벤트는 설치가 되고 있다는 뜻이고, 주요 목적은 사용자가 초기 설정을 할 수 있게 해주는 지점인듯하다.

IndexedDB, CacheStorage 등의 초기 세팅을 install 이벤트 내부에서 해주면 된다고 한다.

// 서비스 워커에서
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) => cache.addAll[("/", "/index.html", "/style.css")])
  )
})

install과 activate 이벤트의 인터페이스인 ExtandableEvent는 waitUntil() 메서드 한 개만을 갖고 있다.

waitUntil()은 말 그대로 넘겨받은 Promise가 끝날 때까지 이 이벤트를 끝내지 말라는 뜻이라고 한다.

즉 작성한 초기 세팅이 다 끝나야 다음 이벤트로 넘어가도록 작성하게 만들어주는거다.

activate 이벤트

설치가 끝나면 활성화가 될텐데 왜 activate라는 이벤트가 따로 있는걸까?

그건 바로 지금 설치한 Service Worker가 업데이트 버전일 때엔, 즉 기존의 Service Worker가 이미 있고 실행중일 땐 활성화가 바로 되지 않기 때문이다.

설치된 Service Worker가 활성화 되는 시점은 이전 버전이 컨트롤 하고 있는 페이지가 닫혔을 때라고 한다.

activate 이벤트의 주요 목적은, 이전 버전에서 쓰인 리소스들의 cleanup을 하게 해주는거라고 한다.

서비스 워커가 업데이트/대체 되는 시점에 트리거되는 이벤트이기 때문인듯하다.

캐시 버전을 업데이트 할 때 이전 버전들의 캐시들을 모두 지우는 작업 등을 주로 한다고 한다.

그리고 서비스 워커(ServiceWorkerGlobalScope)의 skipWaiting() 메서드를 사용하면 즉시 새 버전을 실행시킬 수 있다고 한다.

activate는 이전 버전의 페이지가 닫혀야 실행되므로, skipWaiting()은 install에서 사용하는듯하다.

참고

• Service Workers (web.dev)
• Using Service Workers (MDN)
• ServiceWorkerGlobalScope (MDN) : install, activate, skipWaiting
• ExtendableEvent (MDN) : waitUntil