PWA를 위한 오프라인 기능 구현하기 📶

오늘은 Progressive Web App(PWA)에서 중요한 기능 중 하나인 오프라인 기능을 구현하는 방법을 알아보겠습니다. 웹 개발에 관심 있는 주니어 개발자 여러분, 오프라인 기능을 통해 사용자 경험을 대폭 향상시킬 수 있습니다. 복잡한 기술 용어는 최대한 피하면서 설명하겠습니다!

서비스 워커(Service Worker) 소개

오프라인 기능을 구현하기 위해 우리는 '서비스 워커'라는 기술을 사용할 것입니다. 서비스 워커는 브라우저와 서버 사이에서 작동하는 스크립트 파일입니다. 이것은 웹 앱이 오프라인일 때도 작동할 수 있게 해주는 핵심 기술입니다.

서비스 워커 등록하기

먼저, 서비스 워커를 등록해야 합니다. 이 코드 스니펫을 사용하여 서비스 워커 파일(service-worker.js)을 등록해 보세요.

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);
    });
  });
}

캐싱 전략

서비스 워커를 사용하여 오프라인 기능을 구현하는 핵심은 적절한 캐싱 전략을 선택하는 것입니다. 여기서는 가장 간단한 캐싱 전략인 '캐시 우선(Cache First)' 전략을 사용해 보겠습니다.

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      // 캐시에서 찾은 경우 해당 캐시 반환
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

이 코드는 서비스 워커가 네트워크 요청을 가로채고, 요청에 해당하는 캐시가 있으면 그 캐시를 반환합니다. 캐시가 없으면 네트워크에서 요청을 가져옵니다.

캐시 업데이트

오프라인 기능을 구현할 때 중요한 것은 캐시를 최신 상태로 유지하는 것입니다. 서비스 워커의 install 이벤트를 사용하여 초기 캐시 세트를 설정할 수 있습니다.

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  // 캐시를 열고 필요한 자원을 캐시에 추가합니다.
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

이 코드는 서비스 워커 설치 시 웹 앱에 필요한 기본 자원들을 캐시에 추가합니다. 이렇게 하면 오프라인 상태에서도 이 자원들을 사용할 수 있습니다.

마무리

오프라인 기능은 PWA의 중요한 부분입니다. 오늘 배운 내용을 통해 사용자가 네트워크에 연결되어 있지 않을 때도 웹 앱을 사용할 수 있게 되었습니다. 서비스 워커와 캐싱 전략을 잘 활용하여 사용자 경험을 향상시켜 보세요!

이제 여러분도 PWA의 오프라인 기능 구현에 한 걸음 더 다가섰습니다. 계속해서 연습하고, 새로운 기능을 탐색하여 웹 개발 능력을 키워 나가세요!