Angular 서비스 워커를 사용하면 연결 상태가 좋지 않은 네트워크에서 앱을 더 빠르고 안정적으로 만들 수 있습니다.
제한된 연결 처리
사용자가 네트워크 액세스를 제한하거나 전혀 액세스할 수 없는 경우 웹 앱 기능의 성능이 크게 저하되어 오류가 자주 발생합니다. 사전 캐싱을 제공하기 위해 서비스 워커를 사용하면 네트워크에서 요청을 검색하는 대신 네트워크 요청을 가로채서 로컬 캐시에서 직접 응답을 전달할 수 있습니다. 앱의 애셋이 캐시되고 나면 이 접근 방식을 사용하면 앱 속도가 크게 향상되고 사용자가 오프라인 상태일 때도 앱이 작동할 수 있습니다.
이 게시물에서는 Angular 앱에서 사전 캐싱을 설정하는 방법을 안내합니다. 사용자가 일반적으로 사전 캐싱과 서비스 워커에 대해 잘 알고 있다고 가정합니다. 복습이 필요한 경우 서비스 워커 및 Cache Storage API 게시물을 확인하세요.
Angular 서비스 워커 소개
Angular팀은 프레임워크 및 Angular 명령줄 인터페이스 (CLI)와 원활하게 통합된 사전 캐싱 기능을 갖춘 서비스 워커 모듈을 제공합니다.
서비스 워커를 추가하려면 CLI에서 다음 명령어를 실행합니다.
ng add @angular/pwa
이제 @angular/service-worker 및 @angular/pwa가 앱에 설치되고 package.json에 표시됩니다. ng-add 도식은 서비스 워커를 구성하는 데 사용할 수 있는 ngsw-config.json라는 파일도 프로젝트에 추가합니다. (파일에는 나중에 맞춤설정할 수 있는 기본 구성이 포함되어 있습니다.)
이제 프로덕션용 프로젝트를 빌드합니다.
ng build --prod
dist/service-worker-web-dev 디렉터리 내에서 ngsw.json라는 파일을 찾을 수 있습니다. 이 파일은 Angular 서비스 워커에 앱의 애셋을 캐시하는 방법을 알려줍니다. 이 파일은 구성 (ngsw-config.json) 및 빌드 시 생성된 애셋을 기반으로 빌드 프로세스 중에 생성됩니다.
이제 앱의 프로덕션 애셋이 포함된 디렉터리에서 HTTP 서버를 시작하고 공개 URL을 연 다음 Chrome DevTools에서 네트워크 요청을 확인합니다.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
네트워크 탭에는 ngsw-worker.js 스크립트로 백그라운드에서 직접 다운로드한 정적 애셋이 많이 있습니다.
생성된 ngsw.json 매니페스트 파일에 지정된 정적 애셋을 미리 캐시하는 Angular 서비스 워커입니다.
하지만 중요한 애셋 중 하나(nyan.png)가 누락되었습니다. 이 이미지를 사전 캐시하려면 작업공간의 루트에 있는 ngsw-config.json에 이미지를 포함하는 패턴을 추가해야 합니다.
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/assets/*.png"
]
}
},
...
}
이 변경사항에 따라 /assets 폴더의 모든 PNG 이미지가 app 리소스 애셋 그룹에 추가됩니다. 이 애셋 그룹의 installMode가 prefetch로 설정되어 있으므로 서비스 워커는 지정된 모든 애셋(이제 PNG 이미지를 포함)을 사전 캐시합니다.
사전 캐시할 다른 애셋을 지정하는 것도 매우 간단합니다. app 리소스 애셋 그룹에서 패턴을 업데이트하면 됩니다.
결론
사전 캐싱에 서비스 워커를 사용하면 애셋을 로컬 캐시에 저장하여 앱의 성능을 개선할 수 있으며, 따라서 열악한 네트워크에서 애셋의 안정성을 높일 수 있습니다. Angular 및 Angular CLI로 사전 캐싱을 사용하려면 다음 안내를 따르세요.
- 프로젝트에
@angular/pwa패키지를 추가합니다. ngsw-config.json를 수정하여 서비스 워커가 캐시하는 항목을 제어합니다.