Service Worker API

Web에서 흔히 들어볼 수 있는 역할인데,

→ 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 역할을 한다. 의도는 여러가지 있지만, 그 중 오프라인 경험, 네트워크 요청 인터셉트, 서버 업데이트가 가능하다. 조사하게된 계기인 푸시 알림, 백그라운드 동기화 API로의 접근도 제공한다고 한다.

등록

Service Worker는 ServiceWorkerContainer.register() 메서드를 사용해 처음 등록한다. 성공적으로 등록이 되면 클라이언트가 서비스 워커를 다운로드하고, 설치와 활성화를 시도한다.

다운로드, 설치, 활성화

아래와 같은 생명 주기를 볼 수 있다.

1. 다운로드
2. 설치
3. 활성화

업데이트는

• 범위 내 페이지로의 탐색 발생
• 서비스 워커에서 이벤트가 발생했는데, 서비스 워커를 이전 24시간 내에 다운로드 하지 않은 경우

기존 서비스 워커가 없으면 설치를 시도, 설치 성공하면 활성화 된다.

---

*주의사항

• 지원 브라우저의 보안 컨텍스트(HTTPS)에서만 사용할 수 있음. (+ localhost, 127.0.0.1)
• 서비스 워커는 Context에서 실행되기 때문에 DOM에 접근할 수 없다.
• 앱을 구동하는 주 Javascirpt와는 다른 스레드에서 동작하므로 연산을 가로막지 않는다.
• 온전히 비동기적으로 설계됐으며, 동기적 XHR이나 웹 저장소 등의 API를 서비스 워커내에서 사용할 수 없다.

실험 환경 호스팅하려면 HTTPS 혹은 GitHub, Netlify, Vercel 등의 서비스를 이용할 수 있다.

---

showNotification() method

showNotification(title)
showNotification(title, options)

• title: 알림 창 상단에 표시되는 알림 제목 정의
• options: 알림에 적용할 사용자 지정 설정을 포함하는 옵션 객체
  • actions: 알림에 표시할 작업 배열
    • action: 알림에 표시될 사용자 작업을 식별하는 문자열
    • title: 사용자에게 표시될 동작 텍스트가 포함된 문자열
    • icon: 해당 동작과 함께 표시할 아이콘의 URL이 포함된 문자열
    • navigate: 사용자가 이 작업을 활성화할 때, 이동할 URL이 포함된 문자열
  • badge: 알림 자체를 표시할 공간이 부족할 때 알림을 나타내는 데 사용되는 이미지의 URL이 포함된 문자열
  • body: 제목 아래 표시되는 알림 본문 텍스트를 나타내는 문자열, 기본값은 빈 문자열
  • data: 알림과 연결할 임의의 데이터
  • icon: 알림에 표시될 아이콘의 URL이 포함된 문자열
  • image: 알림에 표시될 이미지의 URL이 포함된 문자열
  • requireInteraction: 알림이 자동으로 닫히지 않고 사용자가 클릭하거나 해제할 때까지 활성화 상태. 기본값은 false
  • tag: 알림을 식별하는 태그를 나타내는 문자열, 기본값은 빈 문자열
  • timestamp: 알림과 관련된 시간을 나타내는 타임스탬프, 이 시간은 기기가 오프라인 상태여서 즉시 전달할 수 없었던 메세지에 대한 알림의 경우 과거 시간일 수 도 있고, 곧 시작될 회의에 대한 알림의 경우 미래 시간일 수 있음

// 샘플 코드
navigator.serviceWorker.register("sw.js");

function showNotification() {
  Notification.requestPermission().then((result) => {
    if (result === "granted") {
      navigator.serviceWorker.ready.then((registration) => {
        registration.showNotification("Vibration Sample", {
          body: "Buzz! Buzz!",
          icon: "../images/touch/chrome-touch-icon-192x192.png",
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: "vibration-sample",
        });
      });
    }
  });
}