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.

Examples

TypeScript 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());

Python example

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.

Sources

• HTML Standard on navigator.onLine and the online and offline events

Related rules

• WEB-224 Keep working when the network drops in Website
• APP-71 Keep a local copy that syncs on reconnect in Web app interface
• MOB-26 Queue offline changes and resolve conflicts on the server in Mobile apps