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

Progressive Web Apps (PWA)는 웹과 모바일 앱의 장점을 결합하여 사용자에게 더 나은 온라인 경험을 제공합니다. 오늘은 PWA에서 중요한 기능 중 하나인 오프라인 기능을 구현하는 방법을 알아보겠습니다. 이 기능은 인터넷 연결이 불안정하거나 없을 때도 사용자가 앱을 계속 사용할 수 있게 해줍니다.

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

오프라인 기능을 구현하기 위해 우리는 서비스 워커를 사용할 것입니다. 서비스 워커는 브라우저와 네트워크 사이에서 작동하는 스크립트로, 오프라인 경험을 가능하게 해줍니다.

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

위 코드는 서비스 워커 설치 단계에서 필요한 파일들을 캐시에 저장합니다. 이렇게 하면 오프라인 상태에서도 이 파일들에 접근할 수 있습니다.

캐시에서 파일 가져오기

이제 사용자가 오프라인일 때 캐시에서 파일을 가져오도록 설정해야 합니다. 이를 위해 서비스 워커의 fetch 이벤트를 사용합니다.

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

이 코드는 네트워크 요청이 발생할 때마다 실행됩니다. 먼저 요청에 해당하는 캐시가 있는지 확인합니다. 캐시가 있다면 캐시된 응답을 반환하고, 없다면 네트워크에서 요청을 가져옵니다.

서비스 워커 등록하기

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

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

위 코드는 브라우저가 서비스 워커를 지원하는지 확인한 후, service-worker.js 파일을 등록합니다. 등록이 성공하면 성공 메시지를, 실패하면 오류 메시지를 출력합니다.

이제 여러분의 PWA는 오프라인에서도 사용할 수 있는 기본적인 설정을 갖추게 되었습니다. 사용자들은 인터넷 연결 여부와 상관없이 일관된 경험을 누릴 수 있게 될 것입니다.