페이지 2: 오프라인 지원: Service Worker 등록

2. 오프라인 지원: Service Worker 등록

Service Worker는 브라우저와 네트워크 사이의 프록시 서버 역할을 하는 JavaScript 파일입니다. 오프라인 사용 환경과 빠른 로딩 속도를 가능하게 하는 핵심 기술입니다.

2.1. Service Worker 등록 (main.js)

웹 앱이 로드될 때 Service Worker를 등록하는 코드를 작성합니다. HTTPS 환경에서만 작동합니다.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

2.2. Service Worker 초기화 (service-worker.js)

service-worker.js 파일은 캐싱 전략을 정의하고 이벤트 리스너를 설정하는 곳입니다. 초기에는 기본적인 캐싱 설정만 포함합니다.

const CACHE_NAME = 'pwa-guide-cache-v1';

// Service Worker가 설치될 때 발생하는 이벤트
self.addEventListener('install', (event) => {
  console.log('[Service Worker] Installed');
});

// Service Worker가 활성화될 때 발생하는 이벤트
self.addEventListener('activate', (event) => {
  console.log('[Service Worker] Activated');
});