오프라인 지원과 백그라운드 동기화

오프라인 우선 사고방식

로컬 저장소에 IndexedDB 사용하기

npm install idb

idb로 데이터베이스 열기

import { openDB } from "idb";

const db = await openDB("app-db", 1, {
  upgrade(db) {
    db.createObjectStore("todos", { keyPath: "id" });
    db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
  }
});

읽기와 쓰기

await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");

navigator.onLine으로 오프라인 감지하기

if (!navigator.onLine) {
  // work from IndexedDB only
}

연결 이벤트에 반응하기

import { ref, onMounted, onUnmounted } from "vue";

const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
  window.addEventListener("online", on);
  window.addEventListener("offline", off);
});
onUnmounted(() => {
  window.removeEventListener("online", on);
  window.removeEventListener("offline", off);
});

오프라인에서 변경 사항 대기열에 넣기

async function saveTodo(todo) {
  await db.put("todos", todo);
  if (!navigator.onLine) {
    await db.add("outbox", { type: "saveTodo", payload: todo });
  } else {
    await api.save(todo);
  }
}

재연결 시 동기화하기

async function flushOutbox() {
  const items = await db.getAll("outbox");
  for (const item of items) {
    await api.send(item);
    await db.delete("outbox", item.id);
  }
}
window.addEventListener("online", flushOutbox);

백그라운드 동기화 API

const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");

worker에서 동기화 처리하기

// service worker
self.addEventListener("sync", (event) => {
  if (event.tag === "flush-outbox") {
    event.waitUntil(flushOutbox());
  }
});

충돌 고려 사항

빠른 확인

요약