---
title: "Say when the network is gone · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/resilience/offline-behaviour
id: APP-52
level: Recommended
updated: 2026-10-22
build: a2a6bdfed830
tokens: 977
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Say when the network is gone

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: APP-52
- Level: Recommended
- Chapter: [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md)
- Rule: When the connection drops, say so in a banner and keep everything already loaded on screen. Either queue changes with idempotency keys and send them on reconnect, or block them with a reason.
- 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.
- How: 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](https://agentwranglers.se/playbook/website/offline-and-installed-apps/offline-support.md).

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### TypeScript example

```ts
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

```python
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
```

## Sources

- [HTML Standard on navigator.onLine and the online and offline events](https://html.spec.whatwg.org/multipage/system-state.html#navigator.online)

## Related rules

- WEB-224 [Keep working when the network drops](https://agentwranglers.se/playbook/website/offline-and-installed-apps/offline-support.md) in Website
- APP-71 [Keep a local copy that syncs on reconnect](https://agentwranglers.se/playbook/app-ui/live-collaboration/local-first-sync.md) in Web app interface
- MOB-26 [Queue offline changes and resolve conflicts on the server](https://agentwranglers.se/playbook/mobile-apps/data-on-the-device/offline-sync.md) in Mobile apps

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/app-ui/resilience/offline-behaviour">Agent Wranglers web app interface playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Give every request a time limit](https://agentwranglers.se/playbook/app-ui/resilience/request-timeouts.md)
- Next: [Recover when a new release replaces the old files](https://agentwranglers.se/playbook/app-ui/resilience/new-release-reload.md)
- [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md)