# Offline-First
Offline-first is a software design approach where applications are built to work fully without an internet connection, treating connectivity as an enhancement rather than a requirement. The app stores data locally and syncs when online, rather than requiring constant server communication. This contrasts with cloud-first apps that fail or degrade without internet. Offline-first is closely related to [[Local-First Software]], though local-first emphasizes data ownership while offline-first emphasizes availability regardless of network status.
Offline-first design acknowledges that network connectivity is unreliable—airplanes, subways, rural areas, or simply spotty Wi-Fi. By storing data locally first, apps remain responsive and functional. When connectivity returns, changes sync in the background. This requires solving conflict resolution (what if two devices edit the same data offline?), often using CRDTs (Conflict-free Replicated Data Types). Offline-first benefits [[Data Ownership]] and [[Data Security]]: your data exists on your device, works without external dependencies, and reduces cloud attack surface.
## Offline-First Architecture
```
┌─────────────────────────────────────────────────────────────┐
│ OFFLINE-FIRST DESIGN │
├─────────────────────────────────────────────────────────────┤
│ │
│ CLOUD-FIRST (Traditional) OFFLINE-FIRST │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ │ │ │ │
│ │ ┌───────────┐ │ │ ┌───────────┐ │ │
│ │ │ Server │ │ │ │ Local │ │ │
│ │ │ (Source │ │ │ │ Storage │ │ │
│ │ │ of Truth)│ │ │ │ (Source │ │ │
│ │ └─────┬─────┘ │ │ │ of Truth)│ │ │
│ │ │ │ │ └─────┬─────┘ │ │
│ │ │ Requires │ │ │ │ │
│ │ │ Internet │ │ │ Works │ │
│ │ ▼ │ │ │ Offline │ │
│ │ ┌───────────┐ │ │ ▼ │ │
│ │ │ App │ │ │ ┌───────────┐ │ │
│ │ │ (Broken │ │ │ │ App │ │ │
│ │ │ Offline) │ │ │ │ (Always │ │ │
│ │ └───────────┘ │ │ │ Works) │ │ │
│ │ │ │ └─────┬─────┘ │ │
│ └─────────────────────┘ │ │ │ │
│ │ │ Sync when │ │
│ │ │ online │ │
│ │ ▼ │ │
│ │ ┌───────────┐ │ │
│ │ │ Server │ │ │
│ │ │ (Backup/ │ │ │
│ │ │ Sync) │ │ │
│ │ └───────────┘ │ │
│ └─────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
## Core Principles
| Principle | Description |
|-----------|-------------|
| **Local-first storage** | Data lives on device primarily |
| **Graceful degradation** | Full function without network |
| **Background sync** | Sync when connected, invisibly |
| **Conflict resolution** | Handle concurrent edits |
| **Optimistic UI** | Assume actions succeed |
## Offline-First vs Cloud-First
| Aspect | Offline-First | Cloud-First |
|--------|---------------|-------------|
| **Without internet** | Full function | Broken/limited |
| **Data location** | Local device | Remote server |
| **Latency** | Instant (local) | Network dependent |
| **Source of truth** | Local (synced) | Server |
| **Resilience** | High | Low |
| **Collaboration** | Async, conflict-handled | Real-time |
## Technical Challenges
| Challenge | Solution |
|-----------|----------|
| **Conflict resolution** | CRDTs, operational transform |
| **Data consistency** | Eventual consistency models |
| **Storage limits** | IndexedDB, SQLite, selective sync |
| **Sync efficiency** | Delta sync, compression |
| **Version tracking** | Vector clocks, Lamport timestamps |
## Technologies
| Technology | Description |
|------------|-------------|
| **CRDTs** | Conflict-free data structures |
| **IndexedDB** | Browser local database |
| **SQLite** | Local relational database |
| **Service Workers** | Offline web app support |
| **PouchDB/CouchDB** | Sync-enabled databases |
| **Automerge** | CRDT library |
| **Yjs** | CRDT for real-time collab |
## Examples
| App | Offline-First Approach |
|-----|------------------------|
| **[[Obsidian]]** | Local Markdown files |
| **[[Logseq]]** | Local files, optional sync |
| **Notion** | Limited offline (caches) |
| **Google Docs** | Partial offline support |
| **Figma** | Local-first with sync |
| **Linear** | Offline-capable issue tracker |
## Benefits
| Benefit | Description |
|---------|-------------|
| **Reliability** | Works in airplane, subway, rural |
| **Speed** | No network latency |
| **[[Data Ownership]]** | Data on your device |
| **[[Data Security]]** | Less cloud exposure |
| **Privacy** | Reduced server logging |
| **Resilience** | Survives service outages |
## Trade-offs
| Trade-off | Consideration |
|-----------|---------------|
| **Complexity** | Sync and conflicts harder |
| **Storage** | Local space required |
| **Real-time collab** | More difficult (not impossible) |
| **Initial load** | May need more data upfront |
## References
- https://offlinefirst.org/
- https://www.inkandswitch.com/local-first/
- https://developer.chrome.com/docs/workbox/ (Service Workers)
## Related
- [[Local-First Software]]
- [[Data Ownership]]
- [[Data Security]]
- [[File over app principle]]
- [[Plain Text]]
- [[Obsidian]]
- [[CRDTs]]