PWA: 설치 가능한 웹앱

{
  "name": "My Notes",
  "short_name": "Notes",
  "description": "간단한 메모 앱",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4f46e5",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

<!-- HTML에서 manifest 연결 -->
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#4f46e5" />

// 최소한의 SW, 설치 조건을 충족시키기 위해
self.addEventListener("fetch", (event) => {
  // 아무것도 하지 않아도 됨, fetch 핸들러의 존재 자체가 조건
});

let deferredPrompt = null;

// 브라우저가 설치 가능하다고 판단하면 이벤트 발생
window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault(); // 기본 배너 억제
  deferredPrompt = event; // 나중에 사용하기 위해 저장
  showInstallButton(); // 자체 설치 버튼 표시
});

// 사용자가 설치 버튼을 클릭하면
async function handleInstallClick() {
  if (!deferredPrompt) return;

  deferredPrompt.prompt(); // 브라우저 설치 대화상자 표시
  const { outcome } = await deferredPrompt.userChoice;

  if (outcome === "accepted") {
    console.log("설치됨");
  }

  deferredPrompt = null;
  hideInstallButton();
}

// 설치 완료 감지
window.addEventListener("appinstalled", () => {
  hideInstallButton();
  // 설치 분석 이벤트 전송
});

// 예: 사용자가 앱을 3회 이상 방문한 후에 설치 제안
const visits = parseInt(localStorage.getItem("visits") ?? "0") + 1;
localStorage.setItem("visits", String(visits));

if (visits >= 3 && deferredPrompt) {
  showInstallBanner("자주 사용하시네요! 홈 화면에 추가하면 더 빠르게 접근할 수 있습니다.");
}

/* standalone 모드에서만 적용 */
@media (display-mode: standalone) {
  .install-banner {
    display: none; /* 이미 설치되었으므로 설치 배너 숨김 */
  }
}

const isStandalone =
  window.matchMedia("(display-mode: standalone)").matches ||
  window.navigator.standalone; // iOS Safari

if (isStandalone) {
  // 앱 모드 전용 UI 표시
}

{
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

// 페이지 코드, SW 업데이트 감지 후 사용자에게 알림
const registration = await navigator.serviceWorker.ready;

registration.addEventListener("updatefound", () => {
  const newWorker = registration.installing;

  newWorker.addEventListener("statechange", () => {
    if (newWorker.state === "installed" && navigator.serviceWorker.controller) {
      // 새 SW가 대기 중, 사용자에게 알림
      showUpdateBanner("새 버전이 있습니다. 지금 업데이트하시겠어요?");
    }
  });
});

function handleUpdateClick() {
  // 대기 중인 SW에게 skipWaiting 요청
  navigator.serviceWorker.getRegistration().then((reg) => {
    reg?.waiting?.postMessage({ type: "SKIP_WAITING" });
  });
}

// 새 SW가 활성화되면 페이지 새로고침
navigator.serviceWorker.addEventListener("controllerchange", () => {
  window.location.reload();
});

// sw.js, skipWaiting 메시지 처리
self.addEventListener("message", (event) => {
  if (event.data?.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});