Mobile Design Rounds
Simulator

Offline chat simulator: send a message with no connection

A chat app must work when the network is bad. Turn the connection off, send messages, and watch the app save them and send them later.

The idea

When you press send, the app does not wait for the server. It saves the message in a database on the phone. The message shows on screen at once. A list of unsent messages, the outbox, holds it until the server confirms.

The server confirms with a short reply, an acknowledgement (ack). If the reply is lost, the app does not know if the server has the message. So it sends the message again with the same ID. The server sees the same ID and ignores the copy. This is the idea behind an idempotency key. It is the design in the chat app case study.

Try this

  1. Press Send a message. The bubble shows at once, then it changes to Sent.
  2. Press Airplane mode. Press Send a message two times. Both messages stay pending, and the outbox lists them.
  3. Press Airplane mode again to turn it off. The outbox sends the messages in order.
  4. Press Lose next ack, then Send a message. The server saves the message, but the reply is lost. The phone sends it again. Look at the counter called Duplicates ignored.

The result of each press is also written in a line of text under the three panes.

Without JavaScript

The simulator needs JavaScript. This table shows what happens in each of the four steps above.

What you doOn the phoneOn the server
Press Send a message while onlineThe message is saved on the device as pending. It shows at once. Then it is sent.It stores the message ID once. The reply (ack) arrives and the message is marked sent.
Turn on Airplane mode, then press Send a messageThe message is saved as pending and added to the outbox. You can still read and write. The screen never waits.Nothing arrives. The server has not seen the message.
Turn Airplane mode offThe outbox sends the pending messages in order.It stores each message ID once.
Press Lose next ack, then Send a messageThe phone does not get the reply, so it sends the message again with the same ID.It stores the message the first time. The second time it sees the same ID, ignores the copy and sends the first reply again. Duplicates ignored: 1.

How the model works

  • Each message gets a short ID on the phone when you press send. This is a client ID. The server stores each ID once.
  • A message is pending until the ack arrives. Then it is sent.
  • In airplane mode, nothing reaches the server, and the outbox grows.
  • The outbox sends one message at a time, in the order you wrote them.
  • After a lost ack, the phone waits a moment and sends again with the same ID. Here the wait is about one second. In the case study, the wait starts at 10 seconds and grows.

What this model leaves out

This is a small model in JavaScript. It has no real network and no background worker. The system never stops the app. The server gives no order numbers. There are no push messages and no second device. The case study covers these.

Read more