서비스 워커 시작하기

이 문서에서는 Angular CLI로 생성한 프로젝트에서 Angular 서비스 워커 지원을 활성화하는 방법을 설명합니다. 이후 예제에서 실제 서비스 워커의 동작을 살펴보며 로딩과 기본 캐싱을 알아봅니다.

프로젝트에 서비스 워커 추가하기

프로젝트에 Angular 서비스 워커를 설정하려면 다음 CLI 명령을 실행하세요:

ng add @angular/pwa

CLI는 다음 작업을 수행해서 서비스 워커를 사용하도록 애플리케이션을 설정합니다:

프로젝트에 @angular/service-worker 패키지를 추가합니다.
CLI에서 서비스 워커 빌드 지원을 활성화합니다.
애플리케이션의 루트 프로바이더에서 서비스 워커를 불러오고 등록합니다.
index.html 파일을 갱신합니다:
- manifest.webmanifest 파일을 추가하는 링크를 포함합니다.
- theme-color 메타 태그를 추가합니다.
설치된 프로그레시브 웹 앱(PWA)을 지원할 아이콘 파일을 추가합니다.
캐싱 동작과 기타 설정을 지정하는 서비스 워커 설정 파일인 ngsw-config.json을 생성합니다.

이제 프로젝트를 빌드하세요:

ng build

이제 CLI 프로젝트가 Angular 서비스 워커를 사용하도록 설정되었습니다.

서비스 워커 동작 살펴보기

이 섹션에서는 예제 애플리케이션을 통해 서비스 워커의 실제 동작을 살펴봅니다. 로컬 개발 중에 서비스 워커 지원을 활성화하려면 다음 명령으로 프로덕션 설정을 사용하세요:

ng serve --configuration=production

또는 서비스 워커 애플리케이션을 지원하는 npm의 http-server 패키지를 사용할 수 있습니다. 설치하지 않고 실행하려면 다음 명령을 사용하세요:

npx http-server -p 8080 -c-1 dist/<project-name>/browser

서비스 워커를 지원하는 애플리케이션이 http://localhost:8080 에서 제공됩니다.

처음 로딩하기

서버가 8080 포트에서 실행 중이라면 브라우저에서 http://localhost:8080에 접근하세요. 애플리케이션이 정상적으로 로딩됩니다.

팁: Angular 서비스 워커를 테스트할 때는 브라우저의 시크릿 창이나 비공개 창을 사용하는 것이 좋습니다. 이전에 남아 있는 상태를 서비스 워커가 읽어서 예기치 않은 동작이 발생하는 것을 방지할 수 있습니다.

도움말: HTTPS를 사용하지 않는다면 localhost에서 애플리케이션에 접근할 때만 서비스 워커가 등록됩니다.

네트워크 문제 재현하기

네트워크 문제를 재현하려면 애플리케이션의 네트워크 통신을 비활성화하세요.

Chrome에서는 다음과 같이 합니다:

오른쪽 위의 Chrome 메뉴에서 Tools > Developer Tools를 선택합니다.
Network 탭으로 이동합니다.
Throttling 드롭다운 메뉴에서 Offline을 선택합니다.

이제 애플리케이션에서 네트워크 통신을 할 수 없습니다.

Angular 서비스 워커를 사용하지 않는 애플리케이션은 이 상태에서 새로고침하면 Chrome의 인터넷 연결 끊김 페이지가 표시되며 "There is no Internet connection"이라고 안내합니다.

Angular 서비스 워커를 추가하면 애플리케이션의 동작이 달라집니다. 새로고침해도 페이지가 정상적으로 로딩됩니다.

Network 탭에서 서비스 워커가 동작하는지 확인해 보세요.

도움말: "Size" 열에서 요청의 상태가 (ServiceWorker)로 표시됩니다. 이는 리소스를 네트워크에서 로딩하지 않는다는 의미입니다. 서비스 워커의 캐시에서 로딩하는 것입니다.

무엇이 캐시에 저장되나요?

브라우저가 이 애플리케이션을 렌더링하는 데 필요한 모든 파일이 캐시에 저장됩니다. 기본으로 생성된 ngsw-config.json은 CLI가 사용하는 다음 리소스를 캐시에 저장하도록 설정되어 있습니다:

index.html(서버 사이드 렌더링이나 사전 렌더링을 사용하는 애플리케이션은 index.csr.html도 포함)
favicon.ico와 manifest.webmanifest
빌드 결과물(JS와 CSS 번들)
브라우저 출력 디렉터리(기본값은 ./dist/<project-name>/browser/) 내 모든 위치의 이미지와 폰트

중요: 생성된 ngsw-config.json에는 캐시에 저장할 수 있는 폰트와 이미지 확장자가 제한된 목록으로 포함됩니다. 필요에 따라 glob 패턴을 수정해야 할 수 있습니다.

애플리케이션 변경하기

서비스 워커가 애플리케이션을 캐시에 저장하는 방법을 살펴보았으니, 다음으로 업데이트가 어떻게 동작하는지 알아봅시다. 애플리케이션을 변경한 뒤 서비스 워커가 업데이트를 설치하는 과정을 확인하세요:

시크릿 창에서 테스트 중이라면 두 번째 빈 탭을 엽니다. 테스트하는 동안 시크릿 모드와 캐시 상태를 유지하기 위해서입니다.
창은 그대로 두고 애플리케이션 탭을 닫습니다. 개발자 도구도 함께 닫힙니다.
http-server를 종료합니다(Ctrl-c).
수정할 src/app/app.html 파일을 엽니다.
Hello, {{ title() }} 문구를 Bienvenue à {{ title() }}!로 바꿉니다.
다시 빌드하고 서버를 실행합니다:

ng build
npx http-server -p 8080 -c-1 dist/<project-name>/browser

브라우저에서 애플리케이션 업데이트하기

이제 브라우저와 서비스 워커가 업데이트된 애플리케이션을 어떻게 처리하는지 살펴봅시다.

같은 창에서 http://localhost:8080을 다시 엽니다. 어떻게 되나요?

무엇이 잘못된 걸까요? 사실 아무 문제도 없습니다! Angular 서비스 워커는 업데이트가 있어도 자신이 설치한 애플리케이션 버전을 제공하며, 제 역할을 수행하고 있습니다. 빠르게 제공하기 위해 서비스 워커는 업데이트 확인을 기다리지 않고 캐시에 저장된 애플리케이션을 제공합니다.

http-server 로그에서 서비스 워커가 /ngsw.json을 요청하는지 확인해 보세요.
```
[2023-09-07T00:37:24.372Z]  "GET /ngsw.json?ngsw-cache-bust=0.9365263935102124" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
```
서비스 워커는 이렇게 업데이트를 확인합니다.
페이지를 새로고침합니다.

서비스 워커는 애플리케이션의 업데이트된 버전을 백그라운드에서 설치했으며, 다음번에 페이지를 로딩하거나 새로고침할 때 최신 버전으로 전환합니다.

서비스 워커 설정

Angular 서비스 워커는 SwRegistrationOptions 인터페이스를 통해 다양한 설정 옵션을 제공하므로 등록 동작, 캐싱, 스크립트 실행을 세밀하게 제어할 수 있습니다.

서비스 워커 활성화와 비활성화

enabled 옵션은 서비스 워커를 등록할지와 관련 서비스가 서비스 워커와 통신을 시도할지를 제어합니다.

import {ApplicationConfig, isDevMode} from '@angular/core';
import {provideServiceWorker} from '@angular/service-worker';

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(), // 개발 환경에서는 비활성화하고 프로덕션에서는 활성화합니다.
    }),
  ],
};

`updateViaCache`로 캐시 제어하기

updateViaCache 옵션은 서비스 워커를 업데이트할 때 브라우저가 HTTP 캐시를 사용하는 방식을 제어합니다. 브라우저가 업데이트된 서비스 워커 스크립트와 불러온 모듈을 가져오는 시점을 세밀하게 제어할 수 있습니다.

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      updateViaCache: 'imports',
    }),
  ],
};

updateViaCache 옵션에는 다음 값을 지정할 수 있습니다:

'imports' - 서비스 워커 스크립트가 불러오는 스크립트에는 HTTP 캐시를 사용하지만, 서비스 워커 스크립트 자체에는 사용하지 않습니다.
'all' - 서비스 워커 스크립트와 불러오는 스크립트 모두 HTTP 캐시를 사용합니다.
'none' - 서비스 워커 스크립트와 불러오는 스크립트 모두 HTTP 캐시를 사용하지 않습니다.

`type` 옵션으로 ES 모듈 지원하기

type 옵션은 서비스 워커 등록 시 스크립트 타입을 지정해서, 서비스 워커 스크립트에서 ES 모듈 기능을 사용할 수 있게 합니다.

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      type: 'module', // ES 모듈 기능을 활성화합니다.
    }),
  ],
};

type 옵션에는 다음 값을 지정할 수 있습니다:

'classic'(기본값) - 기존 방식으로 서비스 워커 스크립트를 실행합니다. 스크립트에서 import, export 같은 ES 모듈 기능을 사용할 수 없습니다.
'module' - 스크립트를 ES 모듈로 등록합니다. import/export 문법과 모듈 기능을 사용할 수 있습니다.

등록 스코프 제어하기

scope 옵션은 서비스 워커가 제어할 수 있는 URL의 범위인 등록 스코프를 정의합니다.

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      scope: '/app/', // 서비스 워커는 /app/ 아래의 URL만 제어합니다.
    }),
  ],
};

서비스 워커가 가로채고 관리할 수 있는 URL을 제어합니다.
기본 스코프는 서비스 워커 스크립트가 있는 디렉터리입니다.
ServiceWorkerContainer.register()를 호출할 때 사용합니다.

등록 전략 설정하기

registrationStrategy 옵션은 서비스 워커를 브라우저에 등록하는 시점을 정의합니다.

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000',
    }),
  ],
};

다음 등록 전략을 사용할 수 있습니다:

'registerWhenStable:timeout'(기본값: 'registerWhenStable:30000') - 애플리케이션이 안정화되는 즉시(대기 중인 마이크로태스크와 매크로태스크가 없을 때) 등록하되, 밀리초로 지정한 제한 시간을 넘기지 않습니다. 제한 시간은 필수입니다. 제한 시간이 없으면 'registerWhenStable'은 서비스 워커를 즉시 등록합니다.
'registerImmediately' - 서비스 워커를 즉시 등록합니다.
'registerWithDelay:timeout' - 밀리초로 지정한 시간이 지난 뒤 등록합니다.

// 즉시 등록합니다.
export const immediateConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerImmediately',
    }),
  ],
};

// 5초 뒤에 등록합니다.
export const delayedConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWithDelay:5000',
    }),
  ],
};

옵저버블 팩토리 함수를 제공해서 등록 시점을 직접 정할 수도 있습니다:

import {ApplicationConfig, isDevMode} from '@angular/core';
import {provideServiceWorker} from '@angular/service-worker';
import {timer} from 'rxjs';

export const customConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: () => timer(10_000), // 10초 뒤에 등록합니다.
    }),
  ],
};

Angular 서비스 워커 더 알아보기

다음 내용도 함께 살펴보세요: