Service Worker API

서비스 워커의 개념과 사용법

서비스 워커는 출처와 경로에 대해 등록하는 이벤트 기반 워커로서 JavaScript 파일의 형태를 갖고 있습니다. 서비스 워커는 연관된 웹 페이지/사이트를 통제하여 탐색과 리소스 요청을 가로채 수정하고, 리소스를 굉장히 세부적으로 캐싱할 수 있습니다. 이를 통해 웹 앱이 어떤 상황에서 어떻게 동작해야 하는지 완벽하게 바꿀 수 있습니다. (제일 대표적인 상황은 네트워크를 사용하지 못할 때입니다.)

서비스 워커는 워커 맥락에서 실행되기 때문에 DOM에 접근할 수 없습니다. 또한 앱을 구동하는 주 JavaScript와는 다른 스레드에서 동작하므로 연산을 가로막지 않습니다(논 블로킹). 서비스 워커는 온전히 비동기적으로 설계됐으며, 그로 인해 동기적 XHR이나 웹 저장소 등의 API를 서비스 워커 내에서 사용할 수 없습니다.

서비스 워커는 보안 상의 이유로 HTTPS에서만 동작합니다. 네트워크 요청을 수정할 수 있다는 점에서 중간자 공격에 굉장히 취약하기 때문입니다. 또한 Firefox에서는 사생활 보호 모드에서 Service Worker API에 접근할 수 없습니다.

등록

서비스 워커는 ServiceWorkerContainer.register() 메서드를 사용해 처음 등록합니다. 성공적으로 등록한 경우 클라이언트가 서비스 워커를 다운로드하고, 출처 전체에 대해 혹은 개발자가 지정한 특정 주소들에 대해서 서비스 워커의 설치와 활성화(아래 구획 참고)를 시도합니다.

다운로드, 설치, 활성화

서비스 워커를 살펴보면 다음과 같은 생명주기를 볼 수 있습니다.

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

서비스 워커가 제어하는 사이트/페이지에 사용자가 처음 접근하는 순간 서비스 워커가 즉시 다운로드됩니다.

서비스 워커의 업데이트는 다음 경우에 발생합니다.

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

다운로드한 파일이 더 새로운 버전인 경우 서비스 워커의 설치를 시도합니다. 버전 비교는 기존 서비스 워커 파일과의 바이트 단위 비교 결과를 사용합니다. 이 페이지/사이트에서 서비스 워커를 처음 발견한 경우에도 "새로운 버전"으로 취급합니다.

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

기존에 서비스 워커가 존재하던 경우, 새로운 버전을 백그라운드에서 설치하지만 활성화는 아직 하지 않습니다. 이 시점의 워커를 대기 중인 워커라고 부릅니다. 대기 중인 워커는 이전 버전의 서비스 워커를 사용하는 페이지가 모두 닫힌 경우 활성화되어 활성 워커가 됩니다. ServiceWorkerGlobalScope.skipWaiting()을 사용해 활성화 절차를 더 빨리 시작할 수 있으며, 새로운 활성 워커는 Clients.claim()을 사용해 이전 페이지를 회수할 수 있습니다.

생명주기 중 발생하는 이벤트 중 하나는 install 이벤트입니다. 이 이벤트의 대표적인 사용 방법은, 예를 들면 내장 저장소 API를 사용해 캐시를 만들고, 오프라인 상황에서 사용할 자산을 준비하는 등, 서비스 워커의 사용을 준비하는 것입니다.

activate 이벤트도 있습니다. activate의 시점에서는 과거의 캐시를 지우고, 구버전 서비스 워커에 관련된 항목을 청소하는 등 여러가지를 정리하기에 좋습니다.

서비스 워커는 FetchEvent 이벤트를 사용해 요청에 응답할 수 있습니다. FetchEvent.respondWith() 메서드를 사용해 요청에 대한 응답을 원하는 방식으로 자유롭게 바꾸세요.

기본적인 첫 서비스 워커를 차근차근 만드는 방법은 서비스 워커 사용하기에서 읽어볼 수 있습니다.

다른 사용법 아이디어

서비스 워커의 설계는 다음과 같은 용도로 사용하는 것도 감안했습니다.

• 백그라운드 데이터 동기화.
• 다른 출처에서의 리소스 요청을 응답.
• 위치정보, 자이로 센서 등 계산에 높은 비용이 들어가는 다수의 페이지에서 함께 사용할 수 있도록 데이터 업데이트를 중앙화.
• 개발 목적으로서 CoffeeScript, Less, CJS/AMD 모듈 등의 의존성 관리와 컴파일.
• 백그라운드 서비스 훅.
• 특정 URL 패턴에 기반한 사용자 지정 템플릿 제공.
• 성능 향상. 사진 앨범의 다음 사진 몇 장처럼, 사용자가 필요로 할 것으로 생각되는 리소스의 프리페칭 등.

미래의 서비스 워커는 웹 플랫폼이 네이티브 앱의 능력에 보다 근접하도록 여러 가지 유용한 기능을 수행할 수 있을 것입니다. 흥미롭게도 다른 명세에서도 서비스 워커 맥락을 사용할 수 있으며, 이미 다음과 같은 곳에서 사용하고 있습니다.

• 백그라운드 동기화: 아무 사용자도 사이트에 없을 때 서비스 워커를 가동해 캐시를 업데이트 하는 등의 작업을 수행.
• 푸시 메시지에 반응: 서비스 워커를 가동, 새로운 콘텐츠가 이용 가능하다는 메시지를 사용자에게 전송.
• 특정 시간과 날짜에 반응.
• 지오펜스 진입.

인터페이스

Cache

ServiceWorker 생명주기의 일부로서 캐시되는 Request / Response 객체 쌍의 저장소를 나타냅니다.

CacheStorage

Cache 객체의 저장소를 나타냅니다. ServiceWorker가 접근할 수 있는 모든 유명 캐시의 주 디렉토리를 제공하며, Cache 객체를 가리키는 문자열 이름의 맵핑도 관리합니다.

Client

서비스 워커 클라이언트의 범위를 나타냅니다. 서비스 워커 클라이언트는 브라우저 맥락에서의 문서이거나, 활성화된 워커가 제어하는 SharedWorker입니다.

Clients

Client 객체의 목록을 나타냅니다. Clients는 현재 출처의 활성 서비스 워커 클라이언트에 접근하는 주요 방법입니다.

ExtendableEvent

서비스 워커 생명주기의 일부로서 ServiceWorkerGlobalScope에서 발생하는 installê³¼ activate 이벤트의 지속시간을 늘립니다. 이로써 데이터베이스 스키마를 업그레이드하거나, 만료된 캐시 항목을 지우는 작업 등이 끝나기 전까지 FetchEvent와 같은 기능 이벤트가 ServiceWorker로 전달되지 않도록 합니다.

ExtendableMessageEvent

The event object of a message event fired on a service worker (when a channel message is received on the ServiceWorkerGlobalScope from another context) — extends the lifetime of such events.

FetchEvent

The parameter passed into the ServiceWorkerGlobalScope.onfetch handler, FetchEvent represents a fetch action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. It contains information about the request and resulting response, and provides the FetchEvent.respondWith() method, which allows us to provide an arbitrary response back to the controlled page.

InstallEvent

The parameter passed into the oninstall handler, the InstallEvent interface represents an install action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. As a child of ExtendableEvent, it ensures that functional events such as FetchEvent are not dispatched during installation.

NavigationPreloadManager

Provides methods for managing the preloading of resources with a service worker.

Navigator.serviceWorker

Returns a ServiceWorkerContainer object, which provides access to registration, removal, upgrade, and communication with the ServiceWorker objects for the associated document.

NotificationEvent

The parameter passed into the onnotificationclick handler, the NotificationEvent interface represents a notification click event that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker.

ServiceWorker

Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same ServiceWorker object.

ServiceWorkerContainer

Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister, and update service workers, and access the state of service workers and their registrations.

ServiceWorkerGlobalScope

Represents the global execution context of a service worker.

ServiceWorkerMessageEvent

Represents a message sent to a ServiceWorkerGlobalScope. Note that this interface is deprecated in modern browsers. Service worker messages will now use the MessageEvent interface, for consistency with other web messaging features.

ServiceWorkerRegistration

Represents a service worker registration.

ServiceWorkerState

Associated with its ServiceWorker's state.

SyncEvent

The SyncEvent interface represents a sync action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker.

SyncManager

Provides an interface for registering and listing sync registrations.

WindowClient

Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of Client object, with some additional methods and properties available.

명세

같이 보기

• ServiceWorker 쿡북
• 서비스 워커 사용하기
• 서비스 워커 기초 코드 예제
• Is ServiceWorker ready?
• Promise
• 웹 워커 사용하기