웹 개발 실무 기술 A to Z # 20 - PWA 및 오프라인 웹 애플리케이션: Service Worker, IndexedDB 활용

웹 개발 실무 기술 A to Z

PWA(Progressive Web Apps)는 네이티브 앱과 유사한 기능을 제공하는 웹 애플리케이션으로,
✔️ 오프라인 지원 → 네트워크 연결 없이도 웹사이트 사용 가능
✔️ 푸시 알림 지원 → 모바일과 데스크톱에서 푸시 알림 제공
✔️ 설치 기능 제공 → 사용자가 앱을 설치하여 실행 가능

이번 글에서는 PWA를 구축하는 방법과 오프라인 웹 애플리케이션 최적화 방법을 설명하겠습니다.

---

1. PWA(Progressive Web App)란?

✔️ 웹 앱을 네이티브 앱처럼 사용할 수 있도록 개선한 기술
✔️ 오프라인 지원, 푸시 알림, 홈 화면 추가 등의 기능 제공
✔️ Google, Twitter, Uber, Pinterest 등 다양한 서비스에서 활용 중

✅ PWA를 적용하면 네이티브 앱처럼 빠르고 강력한 웹 경험 제공 가능!

---

2. PWA의 핵심 요소

요소 설명

Service Worker	백그라운드에서 실행되며 캐싱 및 푸시 알림 처리
웹 앱 매니페스트 (Manifest.json)	앱 아이콘, 이름, 시작 URL 등을 정의
HTTPS	보안 강화를 위해 HTTPS 환경에서 실행 필수

✅ 이 3가지 요소를 갖추면 웹 애플리케이션을 PWA로 변환 가능!

---

3. PWA 구축 – Service Worker 활용

3-1. Service Worker란?

✔️ 웹 브라우저의 백그라운드에서 실행되는 스크립트
✔️ 오프라인 캐싱, 푸시 알림, 백그라운드 동기화 기능 제공
✔️ 네트워크 요청을 가로채고 캐시된 데이터를 제공 가능

---

3-2. Service Worker 등록

(1) Service Worker 등록 코드 (main.js)

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js")
    .then(() => console.log("Service Worker registered!"))
    .catch(err => console.log("Service Worker registration failed:", err));
}

---

3-3. Service Worker 캐싱 설정

(2) Service Worker 파일 (service-worker.js)

const CACHE_NAME = "pwa-cache-v1";
const urlsToCache = ["/", "/index.html", "/styles.css", "/script.js"];

// Service Worker 설치 및 캐싱
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(urlsToCache);
    })
  );
});

// 캐시된 리소스 제공
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

✅ 이제 웹사이트가 오프라인에서도 캐시된 데이터를 제공 가능!

---

4. 웹 앱 매니페스트(Manifest.json) 설정

4-1. 웹 앱 매니페스트란?

✔️ 웹 애플리케이션의 기본 정보를 정의하는 JSON 파일
✔️ PWA를 홈 화면에 추가할 때 필요한 정보 포함
✔️ 앱 아이콘, 테마 색상, 시작 URL 등 설정 가능

---

4-2. Manifest.json 파일 작성

(1) manifest.json 생성

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

(2) HTML에서 매니페스트 파일 연결

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

✅ 이제 사용자가 PWA를 홈 화면에 추가할 수 있음!

---

5. 오프라인 데이터 저장 – IndexedDB 활용

5-1. IndexedDB란?

✔️ 브라우저 내에 대용량 데이터를 저장할 수 있는 비관계형(NoSQL) 데이터베이스
✔️ 오프라인 상태에서도 데이터를 저장하고 검색 가능
✔️ LocalStorage보다 더 큰 데이터 저장 가능

---

5-2. IndexedDB 설정 및 데이터 저장

(1) IndexedDB 데이터베이스 생성

const request = indexedDB.open("PWA_DB", 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore("messages", { keyPath: "id", autoIncrement: true });
};

request.onsuccess = (event) => {
  console.log("IndexedDB 연결 성공!");
};

(2) IndexedDB에 데이터 추가

function saveMessage(message) {
  const db = request.result;
  const transaction = db.transaction("messages", "readwrite");
  const store = transaction.objectStore("messages");
  store.add({ text: message, timestamp: Date.now() });
}

saveMessage("Hello, IndexedDB!");

✅ IndexedDB를 활용하면 오프라인에서도 데이터를 저장하고 불러올 수 있음!

---

6. PWA 적용 전후 비교

6-1. 적용 전

• 네트워크가 끊기면 웹사이트 사용 불가
• 홈 화면 추가 기능 없음
• 푸시 알림 지원되지 않음

6-2. 적용 후

✔️ Service Worker 적용 → 오프라인에서도 웹사이트 사용 가능
✔️ Manifest.json 적용 → 웹앱을 홈 화면에 추가 가능
✔️ IndexedDB 사용 → 데이터를 오프라인에서도 저장 가능

✅ PWA를 적용하면 웹 애플리케이션이 네이티브 앱처럼 동작 가능!

---

7. 마무리 및 다음 글 예고

이번 글에서는 PWA 및 오프라인 웹 애플리케이션 구축을 위한 Service Worker, Manifest.json, IndexedDB 활용법을 살펴봤습니다.
다음 글에서는 **웹 성능 최적화를 위한 최신 기술 (HTTP/3, Brotli 압축, Lazy Loading)**을 소개하겠습니다.

다음 글 예고: "웹 성능 최적화 – HTTP/3, Brotli 압축, Lazy Loading 적용" 🚀