Progressive Web App(PWA) 만들기: 기본 가이드 3단계

단계 1: HTTPS로 배포하기

HTTPS 프로토콜은 사용자 데이터를 보호하고, 서비스 워커와 같은 중요한 기능이 안전하게 작동할 수 있도록 합니다. 실제 웹사이트가 배포될 때는 반드시 HTTPS로 호스팅해야 합니다. 대부분의 호스팅 제공업체는 HTTPS 인증서를 무료로 제공하므로, 배포 전에 이를 활성화해 주세요.

단계 2: 웹 앱 매니페스트 파일 설정하기

매니페스트 파일은 JSON 형식으로 작성되며, PWA의 외관과 설정을 정의합니다. 파일명은 manifest.json으로 설정합니다.

manifest.json 예시

{
    "name": "My Progressive Web App",
    "short_name": "MyPWA",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#007bff",
    "icons": [
        {
            "src": "/images/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/images/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

• name: 앱 이름
• short_name: 홈 화면에 표시될 앱의 짧은 이름
• start_url: 앱이 실행될 기본 URL
• display: standalone으로 설정하면 브라우저 UI 없이 실행됩니다.
• icons: 앱 아이콘을 정의하며, 여러 해상도를 지원할 수 있습니다.

HTML에 매니페스트 연결

<link rel="manifest" href="/manifest.json">

단계 3: 서비스 워커 설정하기

서비스 워커는 자바스크립트 파일로 작성되며, 네트워크 요청을 가로채 캐시에서 파일을 제공하여 오프라인 환경에서도 웹앱이 동작하게 합니다.

서비스 워커 파일(sw.js) 예시

// 서비스 워커 설치 및 캐시 파일 설정
self.addEventListener("install", (event) => {
    event.waitUntil(
        caches.open("my-cache").then((cache) => {
            return cache.addAll([
                "/",
                "/index.html",
                "/styles.css",
                "/script.js",
                "/images/icon-192x192.png",
                "/images/icon-512x512.png"
            ]);
        })
    );
});

// 서비스 워커 활성화 및 캐시 관리
self.addEventListener("activate", (event) => {
    event.waitUntil(
        caches.keys().then((cacheNames) => {
            return Promise.all(
                cacheNames.map((cache) => {
                    if (cache !== "my-cache") {
                        return caches.delete(cache);
                    }
                })
            );
        })
    );
});

// 네트워크 요청 가로채기 및 캐시 반환
self.addEventListener("fetch", (event) => {
    event.respondWith(
        caches.match(event.request).then((response) => {
            return response || fetch(event.request);
        })
    );
});

서비스 워커 등록

if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js").then((registration) => {
        console.log("Service Worker registered with scope:", registration.scope);
    }).catch((error) => {
        console.log("Service Worker registration failed:", error);
    });
}

• install 이벤트: 앱의 주요 파일을 캐시합니다.
• activate 이벤트: 오래된 캐시를 삭제하여 최신 파일만 유지합니다.
• fetch 이벤트: 네트워크 요청을 가로채 캐시를 통해 응답하거나, 네트워크에서 직접 가져옵니다.