야 근데 솔직히 말해봐. 앱 하나 쓰려고 앱스토어 들어가서 다운받고, 설치 기다리고, 권한 허용하고... 이 과정이 얼마나 귀찮음? 😤
근데 요즘 웹사이트 들어갔더니 "홈 화면에 추가하시겠어요?" 뜨고, 추가하니까 진짜 앱처럼 실행되는 거 경험해본 적 있지 않음?
그게 바로 PWA(Progressive Web App)임. 웹 기술로 만들었는데 앱처럼 동작하는 그 신기한 것 ㅋㅋㅋ

⚙️ Service Worker: PWA의 진짜 핵심

Service Worker 없으면 PWA 아님. 진짜로. 이게 PWA를 일반 웹사이트와 구분짓는 가장 중요한 기술이야.
근데 이게 좀 개념이 특이해서 처음엔 헷갈릴 수 있음. 차근차근 설명해줄게 😊

📊 Service Worker 생명주기

Service Worker는 설치 → 활성화 → 실행의 단계를 거침:

💻 실제 Service Worker 코드 예시

// sw.js (Service Worker 파일)

const CACHE_NAME = 'my-pwa-v1';
const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/icons/icon-192.png'
];

// 설치 이벤트: 핵심 파일들을 캐시에 저장
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('캐시 저장 시작!');
      return cache.addAll(ASSETS_TO_CACHE);
    })
  );
});

// 활성화 이벤트: 오래된 캐시 삭제
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames
          .filter((name) => name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      );
    })
  );
});

// fetch 이벤트: 네트워크 요청 가로채기
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      // 캐시에 있으면 캐시에서 반환, 없으면 네트워크 요청
      return cachedResponse || fetch(event.request);
    })
  );
});

📱 Service Worker 등록 코드

// main.js (메인 앱 파일)

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/sw.js')
      .then((registration) => {
        console.log('SW 등록 성공! 스코프:', registration.scope);
      })
      .catch((error) => {
        console.log('SW 등록 실패:', error);
      });
  });
}

📄 Web App Manifest: 앱처럼 보이게 하는 마법

Service Worker가 PWA의 기능적 심장이라면, Web App Manifest는 PWA의 외모를 담당해.
이 JSON 파일 하나로 앱 이름, 아이콘, 색상, 화면 모드 등을 설정할 수 있음.

💻 manifest.json 예시

{
  "name": "나의 멋진 PWA 앱",
  "short_name": "멋진앱",
  "description": "PWA로 만든 최고의 앱입니다",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#0f3460",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "screenshots": [
    {
      "src": "/screenshots/screen1.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ],
  "shortcuts": [
    {
      "name": "새 글 작성",
      "url": "/new-post",
      "icons": [{"src": "/icons/new-post.png", "sizes": "96x96"}]
    }
  ]
}

🖥️ display 속성 옵션들

display 속성이 PWA 경험에서 엄청 중요해. 4가지 옵션이 있음:

🔗 HTML에서 Manifest 연결하기

<!-- index.html의 <head> 안에 추가 -->
<link rel="manifest" href="/manifest.json">

<!-- iOS Safari를 위한 추가 메타태그 (iOS는 manifest 일부 미지원) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="멋진앱">
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">

<!-- 테마 색상 (브라우저 주소창 색상) -->
<meta name="theme-color" content="#0f3460">

📲 "홈 화면에 추가" — 설치 경험 구현하기

PWA의 꽃은 역시 홈 화면 설치 경험이지. 근데 이게 브라우저마다 동작이 달라서 좀 복잡함 ㅋㅋ
제대로 구현하면 사용자가 앱스토어 없이도 앱처럼 쓸 수 있어.

🔔 설치 프롬프트 제어하기

Chrome/Edge에서는 beforeinstallprompt 이벤트로 설치 프롬프트를 제어할 수 있어:

let deferredPrompt; // 설치 프롬프트 저장

// 브라우저가 설치 프롬프트를 띄우려 할 때 이벤트 발생
window.addEventListener('beforeinstallprompt', (e) => {
  // 자동으로 뜨는 걸 막고
  e.preventDefault();
  // 나중에 쓸 수 있게 저장
  deferredPrompt = e;
  // 커스텀 설치 버튼 보여주기
  showInstallButton();
});

// 사용자가 설치 버튼 클릭했을 때
async function handleInstallClick() {
  if (!deferredPrompt) return;
  
  // 설치 프롬프트 표시
  deferredPrompt.prompt();
  
  // 사용자 선택 결과 확인
  const { outcome } = await deferredPrompt.userChoice;
  
  if (outcome === 'accepted') {
    console.log('사용자가 설치를 수락했어요! 🎉');
  } else {
    console.log('사용자가 설치를 거절했어요 😢');
  }
  
  deferredPrompt = null;
  hideInstallButton();
}

// 앱이 설치된 후 이벤트
window.addEventListener('appinstalled', () => {
  console.log('PWA 설치 완료! 🚀');
  deferredPrompt = null;
});

📊 설치 여부 감지하기

// 현재 PWA로 실행 중인지 확인
function isPWA() {
  return window.matchMedia('(display-mode: standalone)').matches
    || window.navigator.standalone === true; // iOS Safari
}

if (isPWA()) {
  console.log('PWA 모드로 실행 중!');
} else {
  console.log('브라우저에서 실행 중');
}

🔔 푸시 알림 구현 — 앱이랑 똑같이

푸시 알림은 사용자 재참여(Re-engagement)에서 엄청 중요한 기능이야.
PWA에서도 네이티브 앱처럼 푸시 알림을 보낼 수 있는데, 이게 생각보다 구현이 좀 복잡함.

🔑 Web Push 동작 원리

// 클라이언트: 푸시 구독 요청
async function subscribeToPush() {
  const registration = await navigator.serviceWorker.ready;
  
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true, // 반드시 true (사용자에게 보이는 알림만)
    applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY)
  });
  
  // 서버에 구독 정보 전송
  await fetch('/api/push-subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
}

// Service Worker: 푸시 이벤트 처리
self.addEventListener('push', (event) => {
  const data = event.data.json();
  
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icons/icon-192.png',
      badge: '/icons/badge-72.png',
      data: { url: data.url },
      actions: [
        { action: 'open', title: '열기' },
        { action: 'close', title: '닫기' }
      ]
    })
  );
});

// 알림 클릭 처리
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  
  if (event.action === 'open') {
    event.waitUntil(
      clients.openWindow(event.notification.data.url)
    );
  }
});

🏢 실제 기업들의 PWA 도입 사례 — 숫자로 증명

이론은 이론이고, 실제로 PWA가 효과가 있냐고? 있음. 데이터로 증명됨 ㅋㅋ
글로벌 기업들의 PWA 도입 결과를 보면 진짜 놀라움.

📊 주요 기업 PWA 도입 성과

⚠️ PWA의 한계 — 솔직하게 말해줄게

PWA가 만능은 아님. 솔직히 말하면 아직 네이티브 앱을 완전히 대체하기엔 한계가 있어.
근데 이 한계들이 점점 줄어들고 있다는 게 포인트임 ㅋㅋ

🔍 iOS Safari PWA 지원 현황 (2024 기준)

🏪 TWA(Trusted Web Activity)로 앱스토어 등록하기

PWA를 Google Play Store에 등록하고 싶다면 TWA를 활용할 수 있어:

# Bubblewrap으로 TWA 생성
npm install -g @bubblewrap/cli

# 초기화 (manifest.json URL 입력)
bubblewrap init --manifest https://your-pwa.com/manifest.json

# APK 빌드
bubblewrap build

🚀 최신 Web API들 — PWA가 점점 강해지고 있음

Project Fugu라고 들어봤어? 구글이 주도하는 프로젝트인데, 웹에서 네이티브 앱 수준의 기능을 사용할 수 있도록 새로운 Web API를 계속 추가하는 프로젝트야.
덕분에 PWA가 할 수 있는 것들이 엄청 늘어나고 있음 ㄷㄷ

🆕 주목할 만한 최신 Web API들

💻 Badging API 사용 예시

// 앱 아이콘에 배지 표시
async function updateBadge(count) {
  if ('setAppBadge' in navigator) {
    if (count > 0) {
      await navigator.setAppBadge(count);
    } else {
      await navigator.clearAppBadge();
    }
  }
}

// 새 메시지 5개 있을 때
updateBadge(5); // 아이콘에 "5" 표시

// 모두 읽었을 때
updateBadge(0); // 배지 제거

📁 File System Access API 예시

// 파일 열기 (네이티브 파일 다이얼로그)
async function openFile() {
  const [fileHandle] = await window.showOpenFilePicker({
    types: [
      {
        description: '텍스트 파일',
        accept: { 'text/plain': ['.txt', '.md'] }
      }
    ]
  });
  
  const file = await fileHandle.getFile();
  const content = await file.text();
  return content;
}

// 파일 저장
async function saveFile(content) {
  const fileHandle = await window.showSaveFilePicker({
    suggestedName: 'document.txt',
    types: [{ accept: { 'text/plain': ['.txt'] } }]
  });
  
  const writable = await fileHandle.createWritable();
  await writable.write(content);
  await writable.close();
}

✅ 실전 PWA 구현 체크리스트

PWA 만들 때 놓치기 쉬운 것들 정리해줄게. 이거 다 체크하면 진짜 제대로 된 PWA임 ㅋㅋ

🔧 기본 설정 체크리스트

🔄 앱 업데이트 처리하기

PWA에서 새 버전 배포 시 사용자에게 업데이트를 알리는 패턴:

// Service Worker 업데이트 감지 및 알림
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then((registration) => {
    
    // 업데이트 감지
    registration.addEventListener('updatefound', () => {
      const newWorker = registration.installing;
      
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          // 새 버전 사용 가능! 사용자에게 알림
          showUpdateNotification();
        }
      });
    });
  });
}

function showUpdateNotification() {
  // 토스트 메시지나 배너로 알림
  const banner = document.createElement('div');
  banner.innerHTML = `
    새 버전이 있어요! 
    <button onclick="location.reload()">업데이트</button>
  `;
  document.body.appendChild(banner);
}

// Service Worker에서 skipWaiting으로 즉시 활성화
self.addEventListener('message', (event) => {
  if (event.data === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

🤔 PWA vs 하이브리드 앱 — 뭘 선택해야 해?

앱 개발할 때 선택지가 여러 개잖아. PWA, 하이브리드 앱(React Native, Flutter), 네이티브 앱...
어떤 상황에서 뭘 선택해야 하는지 정리해줄게.

📊 기술 선택 가이드

💰 개발 비용 비교

🏗️ 처음부터 만드는 미니 PWA 예제

이론만 하면 재미없잖아. 간단한 PWA를 처음부터 만들어보자.
할 일 목록(Todo) 앱을 PWA로 만드는 예제야. 오프라인에서도 동작하고, 홈 화면에 설치도 가능한 버전으로!

📁 프로젝트 구조

my-todo-pwa/
├── index.html          # 메인 HTML
├── app.js              # 앱 로직
├── styles.css          # 스타일
├── sw.js               # Service Worker
├── manifest.json       # Web App Manifest
└── icons/
    ├── icon-192.png
    └── icon-512.png

📄 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나의 할 일 PWA</title>
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#0f3460">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="할일앱">
  <link rel="apple-touch-icon" href="/icons/icon-192.png">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app">
    <header>
      <h1>📝 나의 할 일</h1>
      <div id="offline-indicator" hidden>오프라인 모드</div>
    </header>
    <main>
      <form id="todo-form">
        <input type="text" id="todo-input" placeholder="할 일 입력..." required>
        <button type="submit">추가</button>
      </form>
      <ul id="todo-list"></ul>
    </main>
  </div>
  <script src="app.js"></script>
</body>
</html>

⚙️ app.js (핵심 로직)

// Service Worker 등록
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW 등록 완료!', reg.scope))
      .catch(err => console.log('SW 등록 실패:', err));
  });
}

// 오프라인 감지
window.addEventListener('online', () => {
  document.getElementById('offline-indicator').hidden = true;
});
window.addEventListener('offline', () => {
  document.getElementById('offline-indicator').hidden = false;
});

// Todo 앱 로직
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

// localStorage에서 할 일 불러오기 (오프라인 지원)
let todos = JSON.parse(localStorage.getItem('todos') || '[]');

function renderTodos() {
  todoList.innerHTML = '';
  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.innerHTML = `
      <span class="${todo.done ? 'done' : ''}">${todo.text}</span>
      <button onclick="toggleTodo(${index})">
        ${todo.done ? '↩️' : '✅'}
      </button>
      <button onclick="deleteTodo(${index})">🗑️</button>
    `;
    todoList.appendChild(li);
  });
}

function saveTodos() {
  localStorage.setItem('todos', JSON.stringify(todos));
}

todoForm.addEventListener('submit', (e) => {
  e.preventDefault();
  todos.push({ text: todoInput.value, done: false });
  saveTodos();
  renderTodos();
  todoInput.value = '';
});

function toggleTodo(index) {
  todos[index].done = !todos[index].done;
  saveTodos();
  renderTodos();
}

function deleteTodo(index) {
  todos.splice(index, 1);
  saveTodos();
  renderTodos();
}

renderTodos();

🔧 sw.js (Service Worker)

const CACHE_NAME = 'todo-pwa-v1';
const ASSETS = ['/', '/index.html', '/app.js', '/styles.css', '/icons/icon-192.png'];

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
  );
  self.skipWaiting(); // 즉시 활성화
});

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
    )
  );
  self.clients.claim(); // 모든 클라이언트 즉시 제어
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(cached => cached || fetch(e.request))
  );
});

🔮 PWA의 미래 — 앞으로 어떻게 될까?

PWA 기술은 지금도 빠르게 발전하고 있어. 앞으로 어떤 방향으로 갈지 살펴보자.

🌟 주목할 트렌드들

📈 PWA 시장 현황 (2024)

🎯 마무리 — PWA, 이제 시작해볼 때

자, 여기까지 PWA에 대해 진짜 깊게 파봤어. 정리하면:

PWA는 특히 콘텐츠 중심 서비스, 이커머스, 뉴스/미디어, 기업 내부 도구에서 엄청난 효과를 발휘해.
앱스토어 심사 없이 즉시 배포하고, SEO도 되고, 오프라인도 되고, 설치도 되는 — 이게 PWA의 진짜 매력이야.
이제 PWA 모르면 모바일 웹 개발자라고 하기 좀 민망한 시대가 됐음 ㅋㅋㅋ 지금 바로 시작해봐! 💪