PWA를 구성하는 오프라인 계약

설치 정보

manifest가 홈 화면 이름, 아이콘, 테마 색, 시작 화면을 정의한다.

브라우저가 service worker를 설치하고 activate 단계에서 이전 캐시를 정리한다.

fetch 이벤트에서 네트워크 우선, 캐시 우선, stale-while-revalidate 중 정책을 선택한다.

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

Cache first

정적 자산 로고, CSS, 버전 hash가 있는 JS에 적합

업데이트 감지 필요

Network first

최신 데이터 뉴스, 계정 정보처럼 최신성이 중요한 API

오프라인 fallback 준비

SWR

빠른 표시 후 갱신 캐시를 먼저 보여주고 백그라운드에서 새로 받음

사용자에게 오래된 데이터 표시 여부를 알려야 함

Install

설치 가능한 앱 경험 manifest와 HTTPS, service worker 조건 충족

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

업데이트 새 service worker 배포 시 사용자가 언제 새 버전을 받는지 정해져 있다.

오프라인 연결이 끊겨도 빈 오류 대신 의미 있는 화면이 나온다.

캐시 정리 오래된 캐시 이름과 용량을 정리한다.

HTTPS 등록과 설치 조건을 만족하는 보안 컨텍스트에서 동작한다.