How WhatsApp Works Without Internet: Offline Messaging and Sync Explained
You are on a flight. Airplane mode is on. You text your friend. The app doesn't crash. It shows a clock icon. Later, you land. The message sends.
How?
Internet is unreliable. Tunnels, elevators, bad cell service. Users hate waiting. Apps must handle offline states gracefully. This is offline-first architecture.
Let's break down the system design.
Step 1: Local Storage and Message Queueing
You type "Hey" and hit send. No internet.
The app doesn't fail. It saves the message locally. The UI updates instantly.
React Native apps use local databases for this. Think SQLite, WatermelonDB, or MMKV.
User types "Hey"
↓
Save to Local DB
↓
Add to Outbox Queue
↓
Show "Clock" icon on UI
The app treats the local database as the primary source of truth. The server is just a backup that syncs later.
Step 2: Eventual Consistency (The Magic Trick)
Why do you see your message instantly offline?
Because the UI reads from the local database, not the server.
This is eventual consistency.
Local data is the immediate truth.
Server data is the ultimate truth.
They sync eventually.
You don't wait for the server to say "OK". You trust the local save.
Step 3: Reconnect and Synchronization
You land. Internet connects. A background worker wakes up.
It reads the outbox queue. It pushes messages to the sync server.
Internet Back
↓
Worker reads Outbox
↓
Push to Sync Server
↓
Server pushes to Recipient
↓
Clear from Outbox
If the push fails, the worker retries. Exponential backoff prevents server spam.
Delivery States: The Checkmarks
Messages change status as they travel through the network.
Clock: Saved locally. Queued.
One Gray Check: Reached server. (Sent)
Two Gray Checks: Reached recipient phone. (Delivered)
Two Blue Checks: Recipient opened chat. (Read)
The UI listens for server webhooks or push notifications to update these checkmarks in real-time.
Handling Media While Offline
Text is small. Photos and videos are heavy. Uploading a 4K video on spotty 3G drains battery and fails often.
Apps use a clever trick:
Generate a blurry thumbnail locally.
Show thumbnail in chat immediately.
Queue the heavy file for background upload.
Wait for Wi-Fi to upload the real file.
If the upload fails, it resumes in chunks. The user thinks the message sent instantly.
Conflict Resolution and Message Ordering
What if two people text each other offline at the exact same time? Messages arrive out of order.
Solution: Client-side timestamps.
The app attaches a timestamp to the message before queueing it. The server uses these timestamps to sort the chat history.
Server time is the final source of truth to prevent users from faking timestamps, but client time handles the immediate UI sorting.
Tradeoffs: Reliability vs. Realtime
Syncing constantly kills battery and data.
Apps batch updates. They sync every few minutes, or when the app opens.
The Tradeoff: You might see a message 10 seconds late, but your phone battery lasts all day. Reliability beats realtime.
Summary
Offline-first means writing locally first, syncing later.
Local DB updates the UI instantly, even without internet.
Outbox queues hold pending actions until connection returns.
Checkmarks track the exact network journey of a message.
Timestamps keep chats in order when reconnecting.
Thumbnails fake instant media delivery while heavy files upload in the background.
Build for the offline state first. The online state is just a bonus.
