Angular 서비스 워커 개요

서비스 워커는 기존 웹 배포 모델을 보완하며, 애플리케이션이 운영체제와 하드웨어에서 직접 실행되도록 작성된 코드에 견줄 만한 안정성과 성능으로 사용자 경험을 제공할 수 있게 합니다. Angular 애플리케이션에 서비스 워커를 추가하는 것은 애플리케이션을 프로그레시브 웹 앱(PWA)으로 만드는 과정의 한 단계입니다.

간단히 말하면 서비스 워커는 웹 브라우저에서 실행되며 애플리케이션 캐싱을 관리하는 스크립트입니다.

서비스 워커는 네트워크 프록시로 동작합니다. 애플리케이션에서 외부로 보내는 모든 HTTP 요청을 가로채고, 어떻게 응답할지 선택할 수 있습니다. 예를 들어 로컬 캐시를 조회해서 캐시된 응답이 있으면 이를 제공할 수 있습니다. 프록시 처리는 fetch 같은 프로그래밍 API로 보낸 요청에만 한정되지 않습니다. HTML에서 참조한 리소스는 물론 index.html에 대한 최초 요청까지 포함합니다. 따라서 서비스 워커 기반 캐싱은 서버가 지정한 캐싱 헤더에 의존하지 않고 코드로 완전히 제어할 수 있습니다.

Angular 애플리케이션 번들처럼 애플리케이션을 구성하는 다른 스크립트와 달리 서비스 워커는 사용자가 탭을 닫아도 유지됩니다. 다음에 브라우저에서 애플리케이션을 로딩할 때는 서비스 워커가 먼저 로딩되어, 애플리케이션을 로딩하기 위한 모든 리소스 요청을 가로챌 수 있습니다. 그렇게 설계한 서비스 워커라면 네트워크 없이 애플리케이션을 완전히 로딩 할 수 있습니다.

빠르고 안정적인 네트워크에서도 요청과 응답이 오가는 지연으로 인해 애플리케이션 로딩이 상당히 느려질 수 있습니다. 서비스 워커로 네트워크 의존도를 줄이면 사용자 경험을 크게 개선할 수 있습니다.

Angular의 서비스 워커

Angular 애플리케이션은 단일 페이지 애플리케이션이므로 서비스 워커의 이점을 활용하기에 적합합니다. Angular는 서비스 워커 구현을 함께 제공합니다. Angular 개발자는 저수준 API를 직접 다루는 코드를 작성하지 않고도 이 서비스 워커를 활용해서 안정성과 성능을 높일 수 있습니다.

Angular 서비스 워커는 오래된 콘텐츠를 제공할 위험을 최소화하면서, 느리거나 불안정한 네트워크에서도 최종 사용자의 애플리케이션 이용 경험을 최적화하도록 설계되었습니다.

이를 위해 Angular 서비스 워커는 다음 원칙을 따릅니다:

• 애플리케이션을 캐시에 저장하는 것은 네이티브 애플리케이션을 설치하는 것과 같습니다. 애플리케이션을 하나의 단위로 캐시에 저장하고 모든 파일을 함께 업데이트합니다.

• 실행 중인 애플리케이션은 모든 파일을 동일한 버전으로 계속 사용합니다. 호환되지 않을 수 있는 새 버전의 캐시 파일을 갑자기 제공하지 않습니다.

• 사용자가 애플리케이션을 새로고침하면 캐시에 완전히 저장된 최신 버전이 표시됩니다. 새 탭은 캐시에 저장된 최신 코드를 로딩합니다.

• 변경 사항을 배포하면 비교적 빠르게 백그라운드에서 업데이트합니다. 업데이트 설치와 준비가 끝날 때까지는 이전 버전의 애플리케이션을 제공합니다.

• 가능한 한 대역폭을 절약합니다. 리소스가 변경된 경우에만 다운로드합니다.

이 동작을 지원하기 위해 Angular 서비스 워커는 서버에서 매니페스트 파일을 로딩합니다. ngsw.json이라는 이 파일은 캐시에 저장할 리소스를 설명하고 각 파일 내용의 해시를 포함합니다. 웹 앱 매니페스트와 혼동하지 않도록 하세요. 애플리케이션 업데이트를 배포하면 매니페스트 내용이 바뀌므로 서비스 워커는 새 애플리케이션 버전을 다운로드해서 캐시에 저장해야 한다는 것을 알 수 있습니다. 이 매니페스트는 CLI가 생성한 ngsw-config.json 설정 파일을 바탕으로 생성됩니다.

Angular 서비스 워커 설치는 Angular CLI 명령을 실행하는 것만큼 간단합니다. 이 명령은 Angular 서비스 워커를 브라우저에 등록하고, 서비스 워커와 상호작용하거나 제어할 수 있는 서비스를 의존성으로 주입할 수 있도록 제공합니다. 예를 들어 새 업데이트를 사용할 수 있을 때 알림을 받도록 하거나, 서비스 워커에 서버에서 사용 가능한 업데이트를 확인하도록 요청할 수 있습니다.

시작하기 전에

Angular 서비스 워커의 모든 기능을 활용하려면 최신 버전의 Angular와 Angular CLI를 사용하세요.

서비스 워커를 등록하려면 HTTP가 아닌 HTTPS로 애플리케이션에 접근해야 합니다. 브라우저는 안전하지 않은 연결로 제공되는 페이지의 서비스 워커를 무시합니다. 서비스 워커는 매우 강력하므로 스크립트가 변조되지 않았는지 더욱 주의해야 하기 때문입니다.

이 규칙에는 한 가지 예외가 있습니다. 로컬 개발을 간편하게 할 수 있도록 브라우저는 localhost의 애플리케이션에 접근할 때 안전한 연결을 요구하지 않습니다.

브라우저 지원

Angular 서비스 워커를 활용하려면 서비스 워커를 지원하는 웹 브라우저에서 애플리케이션을 실행해야 합니다. 현재 Chrome, Firefox, Edge, Safari, Opera, UC Browser(Android 버전), Samsung Internet의 최신 버전이 서비스 워커를 지원합니다. IE, Opera Mini 등의 브라우저는 서비스 워커를 지원하지 않습니다.

사용자가 서비스 워커를 지원하지 않는 브라우저로 애플리케이션에 접근하면 서비스 워커가 등록되지 않으며, 오프라인 캐시 관리와 푸시 알림 같은 관련 기능도 동작하지 않습니다. 구체적으로는 다음과 같습니다:

• 브라우저가 서비스 워커 스크립트와 ngsw.json 매니페스트 파일을 다운로드하지 않습니다.
• SwUpdate.checkForUpdate() 호출처럼 서비스 워커와 직접 상호작용하려는 시도는 거부된 Promise를 반환합니다.
• SwUpdate.versionUpdates 같은 관련 서비스의 옵저버블 이벤트가 발생하지 않습니다.

브라우저가 서비스 워커를 지원하지 않아도 애플리케이션이 동작하도록 하는 것을 적극 권장합니다. 지원하지 않는 브라우저는 서비스 워커 캐싱을 무시하지만, 애플리케이션이 서비스 워커와 상호작용하려고 하면 오류를 보고합니다. 예를 들어 SwUpdate.checkForUpdate()를 호출하면 거부된 Promise를 반환합니다. 이런 오류를 방지하려면 SwUpdate.isEnabled로 Angular 서비스 워커가 활성화되어 있는지 확인하세요.

서비스 워커를 지원하는 다른 브라우저에 대한 자세한 내용은 Can I Use 페이지와 MDN 문서를 참고하세요.

관련 자료

이 섹션의 나머지 문서에서는 Angular의 서비스 워커 구현을 구체적으로 다룹니다.

서비스 워커에 대한 일반적인 내용은 서비스 워커 소개를 참고하세요.

브라우저 지원에 대한 자세한 내용은 서비스 워커 소개의 브라우저 지원 섹션, Jake Archibald의 Is Serviceworker ready?, Can I Use를 참고하세요.

추가 권장 사항과 예제는 다음 문서를 참고하세요:

다음 단계

Angular 서비스 워커를 사용하기 시작하려면 서비스 워커 시작하기를 참고하세요.