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

Progressive Web Apps (PWA)는 웹의 힘을 활용하여 더 나은 사용자 경험을 제공하는 혁신적인 방법입니다. 오늘은 PWA에서 중요한 부분 중 하나인 오프라인 기능을 구현하는 방법을 살펴보겠습니다. 이 기능은 사용자가 인터넷 연결 없이도 앱을 사용할 수 있게 해줍니다. 복잡한 용어는 최대한 피하면서, 단계별로 쉽게 설명해 드리겠습니다.

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

서비스 워커는 브라우저와 네트워크 사이에서 작동하는 스크립트입니다. 이를 통해 오프라인 경험을 가능하게 합니다. 먼저, 서비스 워커 파일을 생성해야 합니다.

// service-worker.js
self.addEventListener('install', function(event) {
    console.log('Service worker 설치됨', event);
});

self.addEventListener('activate', function(event) {
    console.log('Service worker 활성화됨', event);
});

이 코드는 서비스 워커의 기본 구조를 설정합니다. install 이벤트는 서비스 워커가 설치될 때 발생하고, activate 이벤트는 활성화될 때 발생합니다.

2. 캐싱 전략 정하기

오프라인 기능을 구현하기 위해서는 앱이 필요로 하는 자원(HTML, CSS, JavaScript 파일 등)을 미리 캐시에 저장해야 합니다. 이를 위해 캐싱 전략을 정해야 합니다. 가장 간단한 전략 중 하나는 설치 시 필요한 모든 자원을 캐시하는 것입니다.

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

3. 오프라인 요청 처리하기

자원을 캐시에 저장했다면, 이제 오프라인 상태에서의 요청을 처리할 수 있습니다. 서비스 워커는 네트워크 요청을 가로채고, 캐시에서 적절한 응답을 반환할 수 있습니다.

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                // 캐시에서 찾은 응답 반환, 없으면 네트워크에서 요청
                return response || fetch(event.request);
            })
    );
});

마무리

이제 기본적인 오프라인 기능을 PWA에 구현하는 방법을 알게 되었습니다. 서비스 워커 설정, 캐싱 전략 결정, 그리고 오프라인 요청 처리를 통해 사용자에게 끊김 없는 경험을 제공할 수 있습니다. 이 글이 웹 개발에 관심 있는 주니어 개발자 여러분께 도움이 되었기를 바랍니다. Happy coding! 🚀