Project 22, PWA and offline
Expense Tracker PWA
Log what you spend and see where it goes. Entries made on a plane or in the subway are queued and sent when the connection comes back.
- Main API
- Background Sync
- Saves to
- IndexedDB
- Files
- index.html, sw.js, manifest
- Your browser
- Checking
This month
OnlineRecent
How it works
- Save locally firstEvery expense goes into IndexedDB right away, marked as not yet synced.
- Ask for a syncThe page registers a sync tag. The browser wakes the service worker when it is online, even if the tab is closed.
- Flush the outboxThe worker sends waiting entries to the server (simulated here) and tells the page, which marks them synced.
// Page: save locally, then ask the browser to sync when online
await db.put("expenses", { ...expense, synced: false });
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("sync-expenses");
// sw.js: runs when the connection is back, even if the tab is closed
self.addEventListener("sync", (event) => {
if (event.tag === "sync-expenses") event.waitUntil(sendUnsynced());
});