How to tell user if they are offline or online?

App is browser based and is using local storage to facilitate offline working (no internet dependency for limited functionality) and faster response (data is available locally so less network calls).

Some transactions can be performed without internet while other transactions always need internet. User needs to synch-out (flush out locally created records) and synch-in (download updates) from time to time.

I need to communicate to the user (in a non-intrusive manner so that he/she can continue working while being aware of the details)

• Whether he/she is offline at the moment,


• For how long he/she has been offline,


• When was his/her browser storage last updated,


• and How many records have been created locally without internet and they are still pending synch-out?

How do I achieve this? Are there any UX studies and best practices for this problem?

Answer

In the Online mode the App works as intended, so you need no to highlight normal mode.

For Offline mode consider two cases:
1. An operation doesn't depend on network connection.
The App displays small non-intrusive notification, so user flow doesn't break.
All the tech details, like Offline time, Number of pending records are available in the dialog, which appears on Details.

2. An action depends on network connection.
The App displays dialog with description, so user clearly understand the limitations.

Gmail provides good examples of dealing with offline mode:
1. You can browse the mails or compose the new one.At that time Gmail displays non-obtrusive notification:

.
2. But when network connection is crucial, Gmail says it clearly: