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

Progressive Web Apps, 줄여서 PWA는 웹의 힘을 빌려 모바일 앱처럼 작동하는 웹사이트를 만들 수 있게 해줍니다. 오늘은 PWA의 핵심 기능 중 하나인 오프라인 기능을 구현하는 방법을 알아보겠습니다. 이 기능은 사용자가 인터넷 연결 없이도 앱을 사용할 수 있게 해줍니다. 어려운 기술 용어는 피하고, 코드 스니펫을 통해 쉽게 설명하겠습니다.

서비스 워커(Service Worker) 설정하기

오프라인 기능을 구현하기 위해 먼저 서비스 워커를 설정해야 합니다. 서비스 워커는 브라우저와 네트워크 사이에서 작동하는 스크립트입니다. 사용자의 장치에 파일을 캐싱(저장)하여 오프라인에서도 접근할 수 있게 해줍니다.

// service-worker.js
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('pwa-demo').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/main.js'
      ]);
    })
  );
});

위 코드 스니펫은 서비스 워커 설치 과정에서 실행됩니다. 여기서는 웹 앱의 주요 파일들을 캐시에 추가하고 있습니다. 이렇게 하면 이후에 이 파일들을 오프라인에서도 불러올 수 있습니다.

오프라인에서 페이지 불러오기

파일들을 캐시에 저장했다면, 이제 오프라인에서도 페이지를 불러올 수 있도록 설정해야 합니다. 서비스 워커의 fetch 이벤트를 사용하여 네트워크 요청을 가로채고, 캐시에서 해당 파일을 찾아 반환할 수 있습니다.

// service-worker.js
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

이 코드는 브라우저가 네트워크 요청을 할 때마다 실행됩니다. 먼저 요청된 리소스가 캐시에 있는지 확인합니다. 만약 캐시에 있다면, 캐시된 리소스를 반환합니다. 캐시에 없다면, 원래의 네트워크 요청을 수행합니다.

서비스 워커 등록하기

마지막으로, 웹 앱이 서비스 워커를 사용할 수 있도록 HTML 파일에 서비스 워커를 등록해야 합니다.

<!-- index.html -->
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('Service Worker 등록 성공:', registration);
    }).catch(function(error) {
      console.log('Service Worker 등록 실패:', error);
    });
  }
</script>

이 스크립트는 브라우저가 서비스 워커를 지원하는지 확인하고, 지원한다면 service-worker.js 파일을 서비스 워커로 등록합니다. 이 과정이 성공하면, 우리의 PWA는 오프라인 기능을 지원하게 됩니다.

이제 여러분의 웹 앱은 오프라인에서도 사용할 수 있는 멋진 PWA로 변모하였습니다. 사용자들은 인터넷 연결이 끊겨도 여러분의 앱을 계속해서 사용할 수 있게 됩니다. PWA를 통해 웹 개발의 새로운 가능성을 탐험해 보세요!