Web Basic · PWA

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

PWA는 앱처럼 보이게 꾸미는 기능이 아니라, 설치 가능성·캐시 전략·네트워크 실패 처리까지 포함한 브라우저 앱 운영 모델이다.

01

설치 정보

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

02

워커 등록

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

03

요청 처리

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

04

오프라인 대응

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

Cache first
정적 자산 로고, CSS, 버전 hash가 있는 JS에 적합
업데이트 감지 필요
Network first
최신 데이터 뉴스, 계정 정보처럼 최신성이 중요한 API
오프라인 fallback 준비
SWR
빠른 표시 후 갱신 캐시를 먼저 보여주고 백그라운드에서 새로 받음
사용자에게 오래된 데이터 표시 여부를 알려야 함
Install
설치 가능한 앱 경험 manifest와 HTTPS, service worker 조건 충족
설치가 목적이 아닐 수도 있음

업데이트 · 오프라인 · 캐시 정리 점검

업데이트 새 service worker 배포 시 사용자가 언제 새 버전을 받는지 정해져 있다.
오프라인 연결이 끊겨도 빈 오류 대신 의미 있는 화면이 나온다.
캐시 정리 오래된 캐시 이름과 용량을 정리한다.
HTTPS 등록과 설치 조건을 만족하는 보안 컨텍스트에서 동작한다.