What's the best way to inform a user that they have disconnected from internet?

Question

So I'm facing this now while developing a Ionic2 Application with Firebase.

Let's say I have the following structure:

Home --> Friends* --> Friend Detail --> Friend Info Edit*

Where pages with a * need to fetch data from firebase. So let's say the user lost their connection during the database read or even didn't had internet in first place, what's the best way to prevent strange behaviors and inform the user?

• Do I force the app to go back to the Home and block user from further - interaction?
• Do I show an alert and cancel the database task?
• Do I check first if it has internet and, if don't, inform him and prevent interaction?
• Let them use the app freely but don't make database calls?

Answer 1

I would recommend letting the user use the app freely for all the offline content with a red toast message at the bottom saying that there is no internet connection and some data cannot be retrieved. When they try to open a tab where internet connection is required they just see an icon of no connection in the middle with No internet connection written below it and a description of the problem.

This kind of approach will inform the user about the connection issue without making a mess and affecting usability.