PWA (Progressive Web App)

PWA(Progressive Web App)는 웹 기술로 만든 애플리케이션에 설치, 오프라인 동작, 푸시 알림 같은 네이티브 앱의 경험을 더한 웹 앱을 말한다. 서비스 워커(Service Worker), 웹 앱 매니페스트(Web App Manifest), HTTPS라는 세 가지 기술 요건 위에 성립하며, 별도의 앱 스토어 심사 없이 URL로 배포하면서도 홈 화면 아이콘으로 실행되는 앱처럼 쓸 수 있다. 웹의 도달력과 앱의 경험을 절충하려는 시도라는 점에서 하이브리드 앱과 목적이 겹치지만, 구현은 순수 웹 표준만으로 이루어진다는 차이가 있다.

PWA를 구성하는 세 요소

첫째 요소는 HTTPS다. 서비스 워커는 네트워크 요청을 가로챌 수 있는 강력한 기능이므로, 중간자 공격을 막기 위해 보안 연결에서만 동작하도록 표준이 강제한다. 둘째는 웹 앱 매니페스트로, 앱 이름, 아이콘, 시작 URL, 테마 색, 표시 방식을 JSON 파일로 선언한다. 브라우저는 이 파일을 보고 설치 가능 여부를 판단하며, display 값을 standalone으로 두면 설치 후 주소창 없는 독립 창으로 실행된다.

{
  "name": "데브핏",
  "short_name": "Devfit",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#6C5CE7",
  "icons": [{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }]
}

셋째이자 핵심은 서비스 워커다. 서비스 워커는 웹 페이지와 별개의 스레드에서 도는 스크립트로, 페이지가 닫혀 있어도 브라우저가 깨워 실행할 수 있다. 페이지와 네트워크 사이의 프록시(Proxy) 위치에서 모든 요청을 가로채고, 캐시 스토리지(Cache Storage)에 저장한 응답으로 대신 답할 수 있다. DOM(Document Object Model)에는 직접 접근할 수 없고, 등록, 설치, 활성화로 이어지는 생명 주기를 가진다.

오프라인 동작과 캐싱 전략

서비스 워커의 fetch 이벤트를 활용하면 네트워크 상태에 따른 응답 전략을 코드로 정의할 수 있다. 대표 전략은 네 가지다. 캐시 우선(Cache First)은 캐시에 있으면 바로 쓰고 없을 때만 네트워크로 가는 방식으로 폰트나 로고처럼 잘 바뀌지 않는 자원에 맞는다. 네트워크 우선(Network First)은 항상 최신을 시도하고 실패 시 캐시로 대체하므로 API 응답에 적합하다. 스테일 와일 리밸리데이트(Stale While Revalidate)는 캐시를 즉시 보여 주면서 뒤에서 새 버전을 받아 다음을 대비하는 절충안이다. 마지막으로 오프라인 폴백(Offline Fallback)은 모든 시도가 실패했을 때 미리 캐시해 둔 대체 페이지를 보여 준다. 여기에 백그라운드 동기화(Background Sync)를 더하면 오프라인 중에 작성한 요청을 큐에 쌓았다가 연결이 돌아왔을 때 자동 전송할 수 있다. 이런 전략 구현을 도와주는 라이브러리로 워크박스(Workbox)가 널리 쓰인다.