Service Worker

Service Worker란?

브라우저가 백그라운드에서 실행하는 스크립트.
웹 페이지와는 별개로 동작한다.
페이지나 사용자 상호작용이 필요없는 기능에 대한 문호 개방(푸쉬 알림, 백그라운드 동기화 등)
PWA를 만들 때 주로 사용된다.

해당 api가 오프라인 환경을 완벽하게 통제할 수 있는 권한을 개발자에게 부여하고, 그 환경을 지원할 수 있도록 한다.

Life Cycle

0. No Service Worker 상태
1. installing 상태

• 이 단계는 등록 시작을 나타낸다.
• 오프라인 캐시와 같은 워커별 리소스를 설정할 수 있다.
• event.waitUntil()을 사용하여 전달된 promise가 resolve 될 때 까지 설치 단계를 확장할 수 있다.
• service worker가 활성화되기 전에 self.skipWaiting()을 사용하여 기존에 설치된 워커를 건너뛰고 현재 제어되고 있는 클라이언트가 닫힐 때 까지 대기하지 않고 새 워커를 활성화 시킬 수 있다.

2. installed 상태

• 다른 서비스워커가 앱을 제어하지 않고 있었다면, 즉시 activate 이벤트 발생 후 activating 상태로 전환한다.
• 다른 서비스 워커가 앱을 제어하고 있다면, waiting 상태로 전환한다.
  3-1. waiting 상태
• 다른 서비스워커가 제어하고 있는 범위의 모든 브라우저/탭/윈도우가 종료될 때까지 waiting상태로 유지
  3-2. activating 상태
• event.waitUntil 함수에 전달된 promise resolve시, activate 이벤트 발생 후 activated 상태로 전환한다.

4. activated 상태
5. redundant 상태

• 서비스워커가 등록 중 설치에 실패하거나, 기존의 서비스워커가 새로운 버전으로 교체되면 중복 상태가 된다.
• 이 상태의 서비스 워커는 앱에 아무런 영향을 미치지 못한다.

주의할 점들

1. 표준이 아니다.
2. https가 적용되어 있어야 한다.
3. proimse 사용법을 알아야 한다.
4. 모든 브라우저를 지원하지 않는다.