Although I have seen similar questions asked before, I have yet to find a satisfactory answer. Therefore, I am presenting my issue here.
I have developed an app that utilizes REST API calls to fetch data from a server. The app consists of 4 primary list views/tabs. In various scenarios:
When the Internet connection is available, everything works smoothly. Users can switch between views and fetch new data from the server. The previously fetched data is stored in the caching system provided by Ionic.
However, if the Internet connection is lost and the user navigates to another view immediately, I encounter difficulties. The Offline/Online event provided by Cordova/Angular takes a while to fire after disconnection. In the meantime, the view navigation triggers $http calls (in the view Enter event) to the server, resulting in an error due to the lack of Internet connection. I don't believe it is wise to treat all $http errors as a result of no Internet connection. There could be other server-side errors causing the problem. I aim to navigate to a generic error page in such cases.
If the Internet connection is lost and the user attempts to navigate to a new view, I aim to display the previously cached data if available. If the new view does not load any data, I wish to show a popup message saying "Please fix your internet". Upon clicking Ok, the user will be directed back to the original view. I have yet to find a satisfactory solution for this situation. While I could handle this in each view's Controller, I prefer to create a generic service or utilize an httpinterceptor to handle all views uniformly.
Is there a robust solution for gracefully handling all the aforementioned scenarios?