React로 PWA 만들기: 오프라인과 캐싱 전략

들어가며

웹 앱을 네이티브처럼 빠르고 신뢰성 있게 동작하게 하려면 PWA(Progressive Web App)가 필수적이다. 특히 네트워크가 불안정한 환경에서 사용자 경험을 지키려면 올바른 캐싱 전략과 service worker 적용이 중요하다. 이 글은 react pwa 설정, 오프라인 캐싱 react 구현, service worker react 적용을 중심으로 단계별로 정리한다.

PWA와 Service Worker의 역할

PWA는 앱처럼 설치 가능하고 푸시, 오프라인 동작 등을 지원하는 웹 앱을 말한다. 핵심은 service worker다. service worker는 브라우저와 네트워크 사이에 위치한 자바스크립트 워커로 요청을 가로채 캐시를 제어하거나 네트워크 요청을 조정한다.

핵심 개념 요약

• Service Worker: 요청 가로채기, 캐시 제어, 백그라운드 작업
• 캐시 스토리지: 정적 자원 및 런타임 요청 저장용
• Manifest: 설치 관련 메타데이터 제공

React 프로젝트에서 PWA 준비하기

Create React App을 사용하면 기본적인 PWA 구조를 쉽게 구성할 수 있다. 기본적으로 service worker 등록 로직과 매니페스트가 포함되므로, react pwa 설정 초반 단계에서는 이 구조를 이해하고 필요에 따라 수정하는 것이 좋다.

기본 service worker 등록 예

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(function(reg) { console.log('Registered', reg); })
      .catch(function(err) { console.log('Registration failed', err); });
  });
}

캐싱 전략의 종류와 선택 기준

캐싱 전략은 자원 특성에 따라 달라진다. 적절한 전략을 선택하면 오프라인 경험과 업데이트 속도 사이에서 균형을 맞출 수 있다.

주요 전략

• Cache First: 정적 자원(이미지, 폰트 등)에 적합. 빠르지만 업데이트 반영이 느림.
• Network First: API 데이터 등 최신 정보 우선. 오프라인일 때는 캐시 사용.
• Stale-While-Revalidate: 캐시된 응답을 바로 제공하고 백그라운드에서 최신화.

정적 자원과 런타임 캐시 설계

정적 자원은 빌드 시해시(해시된 파일명)로 전달하는 것이 안전하다. 이렇게 하면 Cache First 전략을 적용해도 오래된 파일 충돌을 피할 수 있다. 런타임 캐시는 API 응답처럼 자주 변하는 데이터에 대해 Network First 또는 Stale-While-Revalidate를 적용한다.

예시: Workbox로 간단한 캐싱 규칙

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'script' || request.destination === 'style',
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
);

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new NetworkFirst({ cacheName: 'api-responses' })
);

오프라인 데이터 처리

오프라인 상황에서 읽기 전용 캐시는 비교적 간단하다. 문제는 사용자가 생성한 데이터(폼 제출, 변경 등)를 네트워크 복구 시점에 동기화하는 경우다. 이때는 IndexedDB를 활용해 로컬에 임시 저장하고, Background Sync 또는 앱 복구 시 동기화 로직을 실행한다.

간단한 로컬 저장 흐름

• 오프라인 감지 → 데이터 IndexedDB에 저장
• 온라인 복구 → 저장된 데이터 전송 후 성공 시 삭제

async function saveOffline(key, data) {
  // idb-keyval 같은 라이브러리 사용 권장
  await idbKeyval.set(key, data);
}

업데이트와 캐시 무효화

새 버전 배포 시에는 캐시 버전을 관리해 오래된 캐시를 제거해야 한다. service worker의 activate 이벤트에서 불필요한 캐시를 정리하도록 작성하면 사용자가 최신 자원을 받게 된다.

activate 이벤트에서 캐시 정리 예

self.addEventListener('activate', event => {
  const cacheWhitelist = ['static-resources-v2'];
  event.waitUntil(
    caches.keys().then(keyList =>
      Promise.all(keyList.map(key => {
        if (!cacheWhitelist.includes(key)) return caches.delete(key);
      }))
    )
  );
});

테스트와 디버깅

오프라인 동작을 검증하려면 개발자 도구의 네트워크 탭에서 오프라인을 시뮬레이션하고 서비스 워커와 캐시 스토리지를 확인한다. 또한 릴리즈 전에 실제 네트워크 환경에서 동작을 점검하는 것이 중요하다.

권장 설정 체크리스트

• manifest.json에 아이콘, 이름, 시작 URL 설정
• 정적 자원은 해시된 파일명으로 빌드
• API 응답은 캐시 전략에 따라 분리 관리
• 오프라인 작성 데이터는 IndexedDB로 안전하게 저장
• service worker에서 캐시 버전 관리와 불필요 캐시 삭제 구현

마치며

PWA는 사용자 경험을 크게 개선한다. 특히 react pwa 설정과 service worker react 적용을 통해 안정적인 오프라인 기능을 제공할 수 있다. 오프라인 캐싱 react 구현은 전략 선택과 캐시 무효화 설계가 핵심이다. 단계별로 적용하면 예측 가능한 업데이트와 견고한 오프라인 경험을 만들 수 있다.