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

Progressive Web Apps (PWA)는 웹의 힘을 활용하여 더 빠르고, 더 효율적이며, 사용자 친화적인 앱을 만들 수 있게 해줍니다. 오늘은 PWA에서 중요한 부분 중 하나인 오프라인 기능을 구현하는 방법을 살펴보겠습니다. 이 기능은 사용자가 인터넷 연결 없이도 앱을 사용할 수 있게 해줍니다. 이해하기 쉽게 설명하겠습니다!

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

오프라인 기능을 구현하는 첫 단계는 서비스 워커를 설정하는 것입니다. 서비스 워커는 웹 앱과 브라우저 사이에서 작동하는 스크립트입니다. 이를 통해 네트워크 요청을 가로채고, 캐싱 전략을 구현할 수 있습니다.

// service-worker.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/index.html',
        '/styles.css',
        '/script.js',
        // 여기에 더 많은 파일을 추가할 수 있습니다.
      ]);
    })
  );
});

위 코드는 서비스 워커 설치 시 필요한 자원들을 캐시하는 예시입니다. 이렇게 하면, 이후에 이 자원들을 오프라인에서도 접근할 수 있게 됩니다.

네트워크 요청 가로채기

다음으로, 네트워크 요청을 가로채고 캐시된 응답을 제공하는 방법을 설정해야 합니다. 이는 사용자가 오프라인일 때 유용합니다.

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

이 코드는 브라우저가 네트워크 요청을 할 때마다 실행됩니다. 먼저 캐시에서 요청과 일치하는 응답을 찾습니다. 캐시된 응답이 있으면 반환하고, 없으면 네트워크에서 요청을 수행합니다.

서비스 워커 등록하기

마지막으로, 웹 앱에 서비스 워커를 등록해야 합니다. 이는 보통 웹 앱의 메인 JavaScript 파일에서 이루어집니다.

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

이 코드는 브라우저가 서비스 워커를 지원하는지 확인한 후, 페이지가 로드될 때 서비스 워커를 등록합니다.

결론

PWA의 오프라인 기능을 구현하는 것은 사용자 경험을 크게 향상시킬 수 있습니다. 서비스 워커를 설정하고, 네트워크 요청을 가로채며, 적절한 캐싱 전략을 사용함으로써, 사용자들은 인터넷 연결이 끊겼을 때도 웹 앱을 계속해서 사용할 수 있게 됩니다. 이 글이 오프라인 기능 구현의 첫걸음을 내딛는 데 도움이 되었기를 바랍니다. Happy coding!