PWA를 설치 정보와 캐시 전략으로 나누기

설치 정보

manifest가 홈 화면 이름, 아이콘, 표시 모드, 시작 URL을 정의한다.

service worker가 install과 activate 단계에서 캐시를 준비·정리한다.

fetch 이벤트에서 cache first, network first, stale-while-revalidate를 선택한다.

네트워크 실패 시 보여줄 fallback과 저장 데이터를 준비한다.

Cache first

정적 자산 hash가 붙은 JS, CSS, 로고에 적합

업데이트 감지 필요

Network first

최신 데이터 계정 정보와 자주 바뀌는 API

fallback 준비

SWR

빠른 표시 후 갱신 캐시를 먼저 보여주고 새 데이터를 갱신

오래된 정보 표시 여부 안내

Install

설치 가능성 HTTPS, manifest, service worker 조건

설치가 목적이 아닐 수도 있음

업데이트 새 service worker를 사용자가 언제 받는지 정해져 있다.

오프라인 연결이 끊겨도 빈 오류만 보이지 않는다.

캐시 정리 오래된 캐시를 제거한다.

보안 HTTPS 보안 컨텍스트에서 동작한다.