Best practice to handle 'Internet not Available' (Angular, Ionic, Cordova App)

Question

I know that similar questions have been asked before. But, I do not find a satisfactory answer. So, I am posting this.

I have an app, that pulls data from a server using REST API calls. I have 4 primary list views / tabs. Now here are a few scenarios:

1. Internet is available - All is good. You navigate back and forth between the views and you fetch the any new data on the server. Previously fetched data is part of the cache view that Ionic provides. All good.

2. Internet is disconnected. Immediately user navigates to another view. I am not able to use the Offline / Online event that Cordova / Angular provides as it takes a while after the disconnection for the event to fire. Meanwhile, the screen navigation has fired some $http calls (on view Enter event) to my server and returns an error because internet is not available. I dont think it is wise to generalize all $http errors as Internet not available (is there a way to find that error is because of NO INTERNET?). It could be that the error is because of some other error on server side. I want to be able to navigate to a generic error page if this happens.

3. Internet is disconnected, user tries to navigate to a new view. If this new view is loaded with data then just show the data that was cached previously when internet was available. If no data was loaded, then show a popup saying "Please fix your internet". On click of Ok, navigate back to the view where the user came from. I haven't found any good solution to achieve this. Ofcourse, I can handle this in the Controller of every view, but I would like to make a generic service or use an httpinterceptor who can do all this for me once for all the views.

Any robust solutions on how all the above scenarios can be handled gracefully?

Answer 1

for 2:

for any http call, if failed, call 'AnotherApi' which is a 'Very simple Api that is very unlikely to fail on the Server side', if this 'AnotherApi' fails, it's a no internet problem, otherwise you can show your generic Server error page.

to make sure this 'AnotherApi' works, you can place it in Another Domain/Another physical location or simply call any Services available in the internet.

for 3:

in my case, i do not retrieve data from Api directly, in all my views, retrieve data and display data are handled separately. after retrieve data from webservices and/or signalr, I put the data in internal arrays or internal storage or cookie or client side sqlite. To display data, I always retrieve data from client side storage.

I have a signalr connection (something like socket connection) to make sure the display data is the possible newest data since last success internet connection available, the signalr Server tells me if there is any new data in the Server.