Say when the network is gone

How to do it

Treat a failed fetch as offline, and use the offline and online events as hints only. Keep loaded data readable. For apps used on the move, store pending changes in IndexedDB, each with its idempotency key, and send them in order when back online. Show how many changes are waiting. Caching pages is covered in offline support.

Example

export async function sendOrQueue(change: PendingChange) {
  try {
    await apiFetch(change.url, { method: change.method, body: JSON.stringify(change.body), headers: { 'Idempotency-Key': change.key, 'Content-Type': 'application/json' } });
  } catch (error) {
    if (!(error instanceof TypeError)) throw error;
    await pendingChanges.add(change);
    showOfflineBanner(await pendingChanges.count());
  }
}

addEventListener('online', () => pendingChanges.sendAllInOrder());

from playwright.sync_api import expect

def test_offline_edits_arrive_once(page, context):
    page.goto("https://staging.example.com/tasks")
    context.set_offline(True)
    page.get_by_role("checkbox", name="Call the printer").check()
    page.get_by_role("checkbox", name="Order new labels").check()
    expect(page.get_by_role("status")).to_contain_text("offline")
    context.set_offline(False)
    expect(page.get_by_role("status")).to_contain_text("All changes saved")
    assert tasks.change_count("task_77") == 1
    assert tasks.change_count("task_78") == 1

How to check

A browser test goes offline, edits two records and goes back online. The banner shows while offline, and the server has both changes exactly once.