사용자는 느리거나 불안정한 네트워크 연결에서 또는 오프라인 상태에서도 앱이 시작될 것으로 기대합니다. 사용자는 미디어 트랙이나 티켓, 여행 일정과 같이 가장 최근에 상호작용한 콘텐츠를 이용하고 사용할 수 있기를 기대합니다. 요청이 불가능한 경우에는 앱이 자동으로 실패하거나 다운되는 대신 이 사실을 알려주기를 기대합니다. 그리고 사용자는 모든 일을 빨리 하고 싶어 합니다. 이 연구에서 알 수 있듯이 밀리초는 수백만 달러의 수익을 창출합니다. 로드 시간을 0.1초만 개선해도 전환율을 최대 10% 개선할 수 있습니다. 요약하자면, 사용자는 PWA가 안정적일 것이라고 기대하며, 이것이 바로 Google에서 서비스 워커를 제공하는 이유입니다.
Hello 서비스 워커
사용자가 오프라인일 때를 포함하여 앱이 서비스 워커의 범위에 포함되는 리소스를 요청하면 서비스 워커가 네트워크 프록시 역할을 하면서 요청을 가로챕니다. 그런 다음 일반적으로 서비스 워커가 없는 경우와 마찬가지로 Cache Storage API를 통해 캐시로부터 리소스를 제공할지, 아니면 로컬 알고리즘에서 리소스를 생성할지 결정할 수 있습니다. 이를 통해 플랫폼 앱에서 제공하는 것과 유사한 환경을 제공할 수 있으며 완전히 오프라인으로 작동할 수도 있습니다.
서비스 워커 등록
서비스 워커가 페이지를 제어하려면 먼저 페이지를 PWA에 등록해야 합니다. 즉, 서비스 워커가 아직 페이지를 제어할 수 없기 때문에, 사용자가 처음으로 PWA에 접속하면 네트워크 요청이 여러분의 서버로 직접 이동합니다.
브라우저가 Service Worker API를 지원하는지 확인한 후 PWA가 서비스 워커를 등록할 수 있습니다. 서비스 워커는 로드되면 요청을 가로채고 해당 응답을 제공하는 PWA와 네트워크 사이에 공간을 설정합니다.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
서비스 워커가 등록되었는지 확인
서비스 워커가 등록되었는지 확인하려면 선호하는 브라우저에서 개발자 도구를 사용하세요.
Firefox 및 Chromium 기반 브라우저 (Microsoft Edge, Chrome 또는 Samsung Internet):
- 개발자 도구를 열고 애플리케이션 탭을 클릭합니다.
- 왼쪽 창에서 Service Workers를 선택합니다.
- 서비스 워커의 스크립트 URL이 "활성화됨" 상태로 표시되는지 확인합니다. 이 상태의 의미는 이 장의 수명 주기 섹션에서 알아봅니다. Firefox에서는 상태가 '실행 중' 또는 '중지됨'일 수 있습니다.
Safari:
- Develop 메뉴를 클릭한 다음 Service Workers 하위 메뉴를 클릭합니다.
- 현재 출처의 항목이 하위 메뉴에 표시되는지 확인합니다. 그러면 서비스 워커의 컨텍스트에서 검사기가 열립니다.
범위
서비스 워커가 있는 폴더에 따라 범위가 결정됩니다. example.com/my-pwa/sw.js에 있는 서비스 워커는 my-pwa 경로 이하에서 모든 탐색을 제어할 수 있습니다(예: example.com/my-pwa/demos/). 서비스 워커는 해당 범위의 항목 (페이지, 워커, 통칭 '클라이언트')만 제어할 수 있습니다. 브라우저 탭 및 PWA 창에 범위가 적용됩니다.
범위당 서비스 워커 하나만 허용됩니다. 활성 상태이고 실행 중인 경우 메모리에 있는 클라이언트 수 (예: PWA 창 또는 브라우저 탭)와 관계없이 일반적으로 하나의 인스턴스만 사용할 수 있습니다.
Safari에는 파티션이라고 하는 더 복잡한 범위 관리가 있어서 교차 도메인 iframe이 있는 경우 범위의 작동 방식에 영향을 미칩니다. WebKit 구현에 관한 자세한 내용은 WebKit 블로그 게시물을 참고하세요.
Lifecycle
서비스 워커는 설치 방법을 지시하는 수명 주기를 가지며, 이는 PWA 설치와 별개입니다.
서비스 워커 수명 주기는 서비스 워커를 등록하는 것으로 시작됩니다. 그런 다음 브라우저가 서비스 워커 파일을 다운로드하고 파싱하려고 시도합니다. 파싱에 성공하면 install 이벤트가 실행됩니다. install 이벤트는 한 번만 실행됩니다.
서비스 워커 설치는 사용자가 PWA를 설치하지 않아도 사용자 권한을 요청하지 않고 자동으로 진행됩니다. Service Worker API는 데스크톱 기기의 Safari 및 Firefox와 같이 PWA 설치를 지원하지 않는 플랫폼에서도 사용할 수 있습니다.
설치 후 서비스 워커는 아직 PWA를 포함한 클라이언트를 제어할 수 없습니다. 먼저 활성화해야 합니다. 서비스 워커가 클라이언트를 제어할 준비가 되면 activate 이벤트가 실행됩니다. 하지만 서비스 워커를 등록한 페이지가 관리된다는 의미는 아닙니다. 기본적으로 서비스 워커는 다음에 페이지를 새로고침하거나 PWA를 다시 열어 사용자가 해당 페이지로 이동할 때까지 제어 권한을 가지지 않습니다.
self 객체를 사용하여 서비스 워커의 전역 범위에서 이벤트를 수신 대기할 수 있습니다.
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
서비스 워커 업데이트
서비스 워커는 현재 클라이언트를 제어하고 있는 서비스 워커와 동일 파일의 (서버에서) 새로운 버전이 바이트가 다르다는 것을 브라우저가 감지할 때 업데이트됩니다.
설치가 완료되면 기존 (이전) 서비스 워커가 더 이상 클라이언트를 제어하지 않을 때까지 새 서비스 워커가 활성화를 대기합니다. 이 상태를 '대기 중'이라고 하며, 브라우저가 한 번에 한 버전의 서비스 워커만 실행되도록 하는 방법입니다. 페이지를 새로고침하거나 PWA를 다시 열어도 새 서비스 워커가 제어되지 않습니다. 사용자는 현재 서비스 워커를 사용하여 모든 탭과 창을 닫거나 다른 페이지로 이동했다가 다시 뒤로 이동해야 합니다. 그렇게 해야만 새 서비스 워커가 제어할 수 있게 됩니다. 자세한 내용은 이 서비스 워커 수명 주기 문서를 참조하세요.
서비스 워커 수명
일단 설치 및 등록되면 서비스 워커는 범위 내에서 모든 네트워크 요청을 관리할 수 있습니다. 자체 스레드에서 실행되며 활성화 및 종료는 브라우저에 의해 제어됩니다. 따라서 PWA가 열리기 전이나 후에 작동하게 됩니다. 서비스 워커가 자체 스레드에서 실행되는 동안 서비스 워커의 실행 간에 인메모리 상태가 지속된다는 보장은 없으므로 각 실행에서 재사용하고자 하는 내용은 IndexedDB 또는 기타 영구 저장소에서 사용할 수 있는지 확인해야 합니다.
서비스 워커가 아직 실행되고 있지 않은 경우, 범위 내의 네트워크 요청이 수신될 때마다 또는 주기적 백그라운드 동기화 또는 푸시 메시지와 같은 트리거 이벤트가 수신될 때마다 서비스 워커가 시작됩니다.
서비스 워커는 무기한으로 유지되지 않습니다. 정확한 타이밍은 브라우저마다 다르지만, 서비스 워커가 몇 초 동안 유휴 상태이거나 너무 오랫동안 사용 중이면 서비스 워커가 종료됩니다. 서비스 워커가 종료되고 이를 시작하는 이벤트가 발생하면, 서비스 워커가 다시 시작됩니다.
기능
등록된 활성 서비스 워커를 사용하면 PWA의 기본 서비스 워커와 실행 수명 주기가 완전히 다른 스레드가 생성됩니다. 하지만 기본적으로 서비스 워커 파일 자체에는 동작이 없습니다. 이 작업은 코드로 실행되므로 리소스를 캐시하거나 제공하지 않습니다. 다음 장에서 방법을 설명합니다.
서비스 워커의 기능은 프록시 또는 HTTP 요청 처리를 위한 것이 아닙니다. 백그라운드 코드 실행, 웹 푸시 알림 및 프로세스 결제와 같은 다른 목적으로 다른 기능을 사용할 수 있습니다. 이러한 추가는 기능 챕터에서 설명합니다.