Keep a local copy that syncs on reconnect

How to do it

Local-first means the screen never waits for the network. With a CRDT, each side says which changes it has and receives only the missing ones. Browser storage can be cleared, as Expect browser storage to fail or be cleared says, so the server copy stays the one you back up. Tell people they are offline as Say when the network is gone describes. Native apps queue changes as Queue offline changes and resolve conflicts on the server says.

Examples

TypeScript example

const doc = new Y.Doc();
const local = new IndexeddbPersistence(`doc-${documentId}`, doc);
await local.whenSynced;
const remote = new WebsocketProvider('wss://collab.example.com', `doc-${documentId}`, doc);
remote.on('sync', (inStep: boolean) => showSaveState(inStep ? 'Saved' : 'Saving'));

Python example

from playwright.sync_api import expect

def test_offline_edit_survives_reload(page, context):
    page.goto("https://staging.example.com/docs/42")
    context.set_offline(True)
    page.get_by_role("textbox", name="Document").press_sequentially("Order 40 boxes")
    page.reload()
    expect(page.get_by_role("textbox", name="Document")).to_contain_text("Order 40 boxes")
    context.set_offline(False)
    expect(page.get_by_role("status")).to_have_text("Saved")
    assert "Order 40 boxes" in documents.text("42")

How to check

A browser test goes offline, types in a document and reloads the page while still offline. The text is still there. Back online, the server copy holds the text and the page shows "Saved".

Sources

• W3C Indexed Database API 3.0

Related rules

• APP-60 Expect browser storage to fail or be cleared in Web app interface
• APP-52 Say when the network is gone in Web app interface
• MOB-26 Queue offline changes and resolve conflicts on the server in Mobile apps