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

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

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

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

// service-worker.js 파일 생성
self.addEventListener('install', event => {
    console.log('Service worker 설치됨');
});

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

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

2. 캐시에 자산 저장하기

오프라인에서 사용할 웹 앱의 자산(HTML, CSS, JavaScript 파일 등)을 캐시에 저장해야 합니다. 이를 위해 서비스 워커 파일 내에 install 이벤트를 활용합니다.

const CACHE_NAME = 'pwa-demo-v1';
const urlsToCache = [
    '/',
    '/styles/main.css',
    '/script/main.js'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

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

이제 사용자가 오프라인일 때 캐시에서 자산을 제공해야 합니다. 이는 fetch 이벤트를 통해 처리할 수 있습니다.

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

이 간단한 코드를 통해 PWA에 오프라인 기능을 구현할 수 있습니다. 사용자가 인터넷 연결 없이도 앱을 사용할 수 있게 되어, 사용자 경험이 크게 향상됩니다.

오프라인 기능을 구현하는 것은 PWA의 중요한 부분이며, 이를 통해 웹 앱의 접근성과 사용성을 높일 수 있습니다. 시작하기에 앞서, 이 글에서 배운 내용을 차근차근 적용해 보세요. Happy coding!