Service Workers
- 애플리케이션의 캐시를 관리하기 위해 웹 브라우저에서 실행되는 스크립트이다.
- 네트워크 프록시 역할도 한다. 서비스 워커는 애플케이션에서 보내는 HTTP 요청을 모두 인터셉트해서 이 요청에 대한 응답을 직접 보낼 수 있다. => 이미 응답으로 받은 요청이 있다면 이 응답을 로컬에 캐싱해뒀다가 재사용할 수도 있다.
- 서버의 캐싱 로직과 관계없이 모든 캐시를 클라이언트 안에서 코드로 조작할 수 있다.
- 서비스 워커는 사용자가 탭을 닫아도 그대로 유지된다. => 네트워크가 연결되지않은 상태에서도 실행 가능
Angular Service Workers
- 개별 파일 단위로 캐싱할 수 있으며 애플리케이션 전체를 한번에 캐싱할 수도 있다.
- 모든 파일은 같은 버전으로 동작
- 사용자가 애플리케이션을 새로고침하면 마지막에 캐싱된 애플리케이션 코드를 사용해서 화면을 다시 표시한다. 새로운 탭을 여는 경우도 같다.
- 애플리케이션이 사용하는 리소스는 변경되었을 때만 다시 다운로드된다.
- ngsw.json 파일에 캐싱해야할 리소스의 목록과 모든 파일의 내용과 관련된 해시값이 저장된다.
- Angular CLI를 사용해서 생성한 프로젝트에 존재하는 기본 매니페스트 파일의 이름은 ngsw-config.json.
Service Worker 설정 프로퍼티
appData
- 애플리케이션에 필요한 데이터가 있다면 이 섹션을 사용해서 전달
- 업데이트 알림을 표시하는 팝업에 필요한 데이터를 지정하는 용도
index
- 네비게이션 요청이 시작되는 인덱스 페이지 지정
- 보통 /index.html 지정
assetGroups
- 애셋(Assets) 은 앱 버전을 구성하는 리소스 파일을 의미하며, 앱이 업데이트될 때 함께 업데이트
- 보통 /index.html 지정
- 형태
-
{
"assetGroups": [
{
…
},
{
…
}
]
}
interface AssetGroup {
name: string;
installMode?: 'prefetch' | 'lazy';
updateMode?: 'prefetch' | 'lazy';
resources: {
files?: string[];
urls?: string[];
};
cacheQueryOptions?: {
ignoreSearch?: boolean;
};
}
- name => 에셋 그룹들 중 특정 에셋 그룹 구별
- installMode => 리소스 파일들의 초기 캐싱 동작을 지정
- prefetch : 현재 앱 버전에 존재하는 모든 리소스 파일을 서비스 워커가 다운로드받아 캐싱
- lazy : 아무 리소스도 클라이언트에 캐싱하지 않고 요청을 보내고 응답으로 받은 리소스만 캐싱
- updateMode => 리소스 파일을 이미 캐싱한 상태에서 새로운 앱 버전을 발견했을 때 어떤 동작을 할 지 결정
- prefetch : 변경된 리소스를 즉시 다운로드받고 캐싱
- lazy : 서비스 워커는 해당 리소스를 캐싱하지 않고 다시 한 번 해당 리소스가 요청되었을 때 이 리소스가 캐싱되지 않은 것으로 간주하고 새로운 요청을 보냄. updateMode에 lazy 방식을 사용하려면 installMode도 lazy를 지정
- resources => 캐싱할 리소스 목록
- files : 대상은 파일 하나가 될 수도 있고, glob 패턴으로 한 번에 여러 파일을 지정할 수도 있다
- urls : 매칭될 URL이나 URL패턴을 지정
출처 : https://www.angular.kr/guide/service-worker-intro
