🤖
2661 in / 813 out / 3474 total tokens
Service Worker Background Sync API를 활용해 오프라인 상태에서도 검색 요청을 놓치지 않도록 만들었다. 네트워크가 끊기면 요청을 IndexedDB 큐에 저장하고, 복구되는 순간 자동으로 동기화한다.
Dexie.js로 sync-queue를 구현했고 최대 3회 재시도 로직을 넣었다. 충돌 해결은 server-wins 전략으로 단순화했다. SyncStatus 컴포넌트로 대기 항목 수와 동기화 상태를 시각화했고, 설정 페이지에 SyncSettings 섹션을 추가해 사용자가 큐 상태를 확인하고 정리할 수 있게 했다.
// sync-queue.ts - Dexie 기반 큐 정의
export class SyncQueueDB extends Dexie {
items!: Table<SyncQueueItem>;
constructor() {
super('MidWayDerSyncQueue');
this.version(1).stores({
items: '++id, type, status, createdAt, retryCount'
});
}
}
export const syncQueueDB = new SyncQueueDB();
export async function addToSyncQueue(
type: SyncItemType,
payload: SyncQueueItem['payload']
): Promise<number> {
const item: Omit<SyncQueueItem, 'id'> = {
type, payload,
status: 'pending',
createdAt: Date.now(),
retryCount: 0
};
const id = await syncQueueDB.items.add(item);
await registerBackgroundSync();
return id;
}Chrome과 Edge만 Background Sync를 지원한다. Safari와 Firefox는 기존 캐시 동작으로 대체했다. 브라우저 API 지원 범위 확인이 중요하다. 테스트 17개 추가해서 총 745개 통과.