v145 · Web APIs · IndexedDB · demo
Offline Sync
An offline-first notes app where local edits are written to IndexedDB immediately, then synced when "online". Because sync uses put() in upsert mode, sending the same note twice is safe — the second write is idempotent. Toggle the simulated connection and watch which notes sync without duplicating or corrupting existing records.
Chrome 145+ — IndexedDB
put() formalised as an atomic upsert (insert-or-replace). The idempotent sync pattern depends on this guarantee: re-syncing a note that already exists replaces it cleanly rather than creating a duplicate.
Write a note · toggle offline mode · edit the note again · go back online and sync · confirm no duplicate records appear
Local editor
Online
Sync controls
Simulate going offline then online to test idempotent upsert sync.
Pending sync count: 0
Upsert = insert-or-replace. Re-syncing the same note ID is safe — no duplicates.
IndexedDB — stored notes
0 notes
No notes yet — save one above
Sync log
—Waiting…
// IndexedDB upsert (put) — idempotent sync pattern
// Chrome 145 formalises put() as atomic insert-or-replace.
const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
// Upsert: if 'note-1' exists → replace. If absent → insert.
// Safe to call multiple times — no duplicates, no read-check-write needed.
store.put({
id: 'note-1',
content: 'Edited content',
updatedAt: Date.now(),
synced: true
});
// Before: you had to read first to merge fields:
const existing = await getNote('note-1'); // extra round-trip
store.put({ ...existing, content: 'Edited', synced: true });