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

Progressive Web Apps(PWA)는 웹의 힘을 모바일 앱처럼 활용할 수 있게 해주는 멋진 기술입니다. 오늘은 PWA에서 중요한 오프라인 기능을 어떻게 구현하는지 알아보겠습니다. 이 기능은 사용자가 인터넷 연결 없이도 앱을 사용할 수 있게 해줍니다. 복잡한 기술 용어는 사용하지 않을 거니 걱정 마세요!

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

PWA의 핵심은 '서비스 워커'입니다. 서비스 워커는 브라우저와 네트워크 사이에서 작동하는 스크립트로, 오프라인 기능을 가능하게 해줍니다. 먼저, 서비스 워커 파일을 생성해야 합니다.

// service-worker.js
self.addEventListener('install', function(event) {
  // 캐시 파일 설정
  event.waitUntil(
    caches.open('pwa-demo').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

이 코드는 서비스 워커가 설치될 때, 주요 파일들을 캐시에 저장합니다. 이렇게 하면 오프라인 상태에서도 이 파일들에 접근할 수 있게 됩니다.

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

이제 사용자가 오프라인일 때 캐시에서 페이지를 불러올 수 있도록 설정해야 합니다. 서비스 워커 파일에 다음 코드를 추가하세요.

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

이 코드는 네트워크 요청이 발생할 때마다 실행됩니다. 먼저 캐시에서 요청한 리소스를 찾습니다. 만약 캐시에 리소스가 있다면, 캐시된 리소스를 반환합니다. 캐시에 없다면, 네트워크를 통해 리소스를 가져옵니다.

서비스 워커 등록하기

마지막으로, 웹 애플리케이션에 서비스 워커를 등록해야 합니다. HTML 파일에 다음 스크립트를 추가하세요.

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('서비스 워커 등록 성공:', registration);
    }).catch(function(error) {
      console.log('서비스 워커 등록 실패:', error);
    });
  }
</script>

이 스크립트는 브라우저가 서비스 워커를 지원하는지 확인하고, /service-worker.js 파일을 서비스 워커로 등록합니다.

이제 기본적인 PWA 오프라인 기능 구현을 마쳤습니다! 사용자는 인터넷 연결 없이도 앱을 사용할 수 있게 되었어요. 더 많은 기능을 추가하고 싶다면, 서비스 워커와 캐시 API에 대해 더 깊이 공부해 보세요. Happy coding! 🚀