HTML에서 서비스 워커 등록하기

서비스 워커는 페이지와 분리되어 백그라운드에서 실행되며, 자신의 scope에 해당하는 네트워크 요청을 가로채는 JavaScript 파일입니다. 캐시를 통해 오프라인 지원, 푸시 알림, 백그라운드 동기화 및 더 빠른 재방문 로딩을 제공합니다.

페이지 스크립트에서 다음과 같이 워커를 등록하십시오: navigator.serviceWorker.register("/sw.js"). 브라우저는 /sw.js를 가져와 구문 분석하고, install 이벤트를 실행한 뒤 등록된 scope의 요청을 가로채기 시작합니다.

오래된 브라우저는 service worker를 지원하지 않습니다. register를 호출하기 전에 항상 "serviceWorker" in navigator로 기능을 감지하십시오. 그렇지 않으면 해당 API가 없는 브라우저에서 호출 시 예외가 발생합니다. 폴리필은 실용적이지 않습니다. service worker는 브라우저 수준의 통합이 필요하므로 폴리필로 구현할 수 없습니다.

scope는 워커가 제어하는 경로 접두사입니다. 기본적으로 scope는 워커 파일이 있는 디렉터리입니다. /sw.js는 / 아래의 모든 URL을 제어합니다. 다른 파일 위치에서 더 깊은 scope의 워커를 등록하려면 scope 옵션을 설정하고 AND Service-Worker-Allowed 헤더를 함께 제공해야 합니다.

전체 사이트가 기본 scope에 포함되도록 애플리케이션 루트(/sw.js)에 sw.js를 배치하십시오. 더 깊은 경로(/app/sw.js)에 배치하면 scope가 /app/ 및 그 하위 경로로 제한되는데, 이는 대부분의 경우 원하는 설정이 아닙니다.

핵심 렌더링 중 대역폭을 두고 경쟁하지 않도록 페이지가 로드된 후 워커를 등록하십시오. window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js"))를 사용하면 됩니다. PWA 기능은 첫 방문을 지연시키지 않고 이후 방문부터 작동합니다.

브라우저는 업데이트된 sw.js를 자동으로 확인합니다(일반적으로 24시간마다, 그리고 대부분의 페이지 로드 시). 파일 내용이 변경되면 새 워커를 다운로드하고 설치한 뒤, 기존 탭이 모두 닫힐 때까지 "waiting" 상태로 대기했다가 활성화합니다.

registration.update()는 수동으로 업데이트 확인을 실행합니다. 새 sw.js 안에서 self.skipWaiting()을 호출하면 탭이 닫힐 때까지 기다리지 않고 즉시 활성화됩니다. 두 방법을 함께 사용하면 "항상 최신 워커 실행" 동작을 구현할 수 있지만, 세션 중에 리소스를 다시 가져올 수 있다는 비용이 따릅니다.

registration.unregister()는 워커를 제거합니다. 문제가 있는 워커가 사이트의 작동을 방해할 때 개발 중에 유용합니다. Chrome DevTools의 Application → Service Workers에는 디버깅 중 같은 목적으로 사용할 수 있는 "등록 해제" 버튼이 있습니다.

HTTP에서 HTTPS 없이 워커를 등록하면 조용히 실패합니다. service worker에는 보안 출처가 필요하므로 HTTPS 또는 개발 환경의 localhost에서 제공해야 합니다. 등록이 적용되지 않으면 콘솔에서 "SSL 인증서 오류가 발생했습니다"라는 메시지를 확인하십시오.

워커는 DOM에 접근할 수 없습니다. 메시지를 전달하려면 페이지에서 navigator.serviceWorker.controller.postMessage()를 사용하고, 워커에서는 self.addEventListener("message", handler)를 사용하십시오(반대 방향도 같은 방식입니다). 캐시 무효화, 버전 확인 및 사용자 지정 이벤트에 유용합니다.

첫 방문에서는 페이지를 새로 로드한 후에야 워커가 설치되고 페이지 제어를 시작합니다. 첫 탐색부터 즉시 제어하려면 activate 이벤트에서 self.clients.claim()을 호출하십시오. 오프라인 우선 앱에 유용한 방법입니다.

service worker를 HTTPS 또는 localhost를 통해 제공해야 하는 이유는 무엇입니까?

기능 지원 여부를 확인한 후 페이지 JS에서 navigator.serviceWorker.register("/sw.js")로 service worker를 등록하십시오. 전체 scope를 사용하려면 sw.js를 애플리케이션 루트에 배치하십시오. 핵심 렌더링과 경쟁하지 않도록 로드 시 등록하십시오. 업데이트는 주기적으로 자동 확인되며 registration.update 또는 skipWaiting으로 강제할 수 있습니다. 악성 워커 삽입을 방지하려면 HTTPS가 필요합니다.