Background Sync와 백그라운드 처리

// 페이지 코드, 댓글 전송 실패 시 sync 등록
async function postComment(comment) {
  try {
    await fetch("/api/comments", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(comment),
    });
  } catch {
    // 네트워크 실패, IndexedDB에 저장 후 sync 등록
    await saveToOutbox(comment);

    const registration = await navigator.serviceWorker.ready;
    await registration.sync.register("sync-comments");
    // 사용자에게 "온라인 복귀 시 자동 전송됩니다" 표시
  }
}

// sw.js, sync 이벤트 처리
self.addEventListener("sync", (event) => {
  if (event.tag === "sync-comments") {
    event.waitUntil(syncComments());
  }
});

async function syncComments() {
  const comments = await getOutbox(); // IndexedDB에서 보류 중인 댓글 조회

  for (const comment of comments) {
    await fetch("/api/comments", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(comment),
    });
    await removeFromOutbox(comment.id); // 성공하면 outbox에서 삭제
  }
}

// outbox.js, SW와 페이지 양쪽에서 import 가능
const DB_NAME = "app-outbox";
const STORE_NAME = "pending";

function openDB() {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(DB_NAME, 1);
    req.onupgradeneeded = () => {
      req.result.createObjectStore(STORE_NAME, { keyPath: "id", autoIncrement: true });
    };
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

export async function saveToOutbox(data) {
  const db = await openDB();
  const tx = db.transaction(STORE_NAME, "readwrite");
  tx.objectStore(STORE_NAME).put({ ...data, createdAt: Date.now() });
  return new Promise((resolve) => { tx.oncomplete = resolve; });
}

export async function getOutbox() {
  const db = await openDB();
  const tx = db.transaction(STORE_NAME, "readonly");
  return new Promise((resolve) => {
    const req = tx.objectStore(STORE_NAME).getAll();
    req.onsuccess = () => resolve(req.result);
  });
}

export async function removeFromOutbox(id) {
  const db = await openDB();
  const tx = db.transaction(STORE_NAME, "readwrite");
  tx.objectStore(STORE_NAME).delete(id);
}

// 페이지 코드, 주기적 동기화 등록
const registration = await navigator.serviceWorker.ready;
const status = await navigator.permissions.query({ name: "periodic-background-sync" });

if (status.state === "granted") {
  await registration.periodicSync.register("update-feed", {
    minInterval: 12 * 60 * 60 * 1000, // 최소 12시간 간격
  });
}

// sw.js
self.addEventListener("periodicsync", (event) => {
  if (event.tag === "update-feed") {
    event.waitUntil(updateFeed());
  }
});

async function updateFeed() {
  const response = await fetch("/api/feed/latest");
  const data = await response.json();
  // IndexedDB에 저장, 다음에 앱을 열면 최신 데이터가 즉시 표시됨
  await saveFeedToDB(data);
}

// 페이지 코드, 대용량 다운로드 시작
const registration = await navigator.serviceWorker.ready;
const bgFetch = await registration.backgroundFetch.fetch(
  "podcast-episode-42",
  ["/media/episode-42-part1.mp3", "/media/episode-42-part2.mp3"],
  {
    title: "에피소드 42 다운로드 중",
    icons: [{ src: "/icons/podcast.png", sizes: "192x192" }],
    downloadTotal: 120 * 1024 * 1024, // 120MB
  }
);

// 진행률 추적
bgFetch.addEventListener("progress", () => {
  const percent = Math.round((bgFetch.downloaded / bgFetch.downloadTotal) * 100);
  updateUI(`${percent}% 완료`);
});

// sw.js, 다운로드 완료 처리
self.addEventListener("backgroundfetchsuccess", (event) => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open("podcasts");
      const records = await event.registration.matchAll();
      for (const record of records) {
        await cache.put(record.request, await record.responseReady);
      }
    })()
  );
});

self.addEventListener("backgroundfetchfail", (event) => {
  console.log("다운로드 실패:", event.registration.id);
});

async function postComment(comment) {
  try {
    await fetch("/api/comments", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(comment),
    });
    showSuccess("댓글이 등록되었습니다.");
  } catch {
    // Background Sync 지원 여부 확인
    const registration = await navigator.serviceWorker?.ready;

    if (registration?.sync) {
      await saveToOutbox(comment);
      await registration.sync.register("sync-comments");
      showInfo("온라인 복귀 시 자동 전송됩니다.");
    } else {
      // 폴백: 사용자에게 재시도 안내
      showError("네트워크 연결을 확인하고 다시 시도해 주세요.");
    }
  }
}