PWA Offline-First
IndexedDB with idb
import { openDB } from 'idb';
const db = await openDB('app', 1, {
upgrade(db) { db.createObjectStore('items', { keyPath: 'id' }).createIndex('synced', 'synced'); },
});
await db.put('items', { id: crypto.randomUUID(), text: 'hello', synced: false });
Sync When Online
async function sync() {
if (!navigator.onLine) return;
const unsynced = await db.getAllFromIndex('items', 'synced', false);
const res = await fetch('/api/sync', { method: 'POST', body: JSON.stringify(unsynced) });
for (const item of unsynced) await db.put('items', { ...item, synced: true });
}
window.addEventListener('online', sync);
Key Principles
- Store locally first (IndexedDB), sync when online
- Queue mutations offline, replay on reconnect
- Handle conflicts (last-write-wins or merge)
- Show sync status indicator to users
ComeOnOliver