Optimum offline handling in a mobile app

Developing an app which works offline and syncs to server when it comes online is a challenge. You need to work with cache revalidation and merging data across sources. Same user may be logged in from multiple devices, and change data both offline and online. These are some of the most difficult aspects of programming in general.

If you really need that sort of functionality, then this post is not for you. If you are building a Google Docs/Sheets competitor, you have no choice but to take the hard path.

Alternatively, you may want to let the app work like a website. Works only if there is internet, and errors out otherwise. This isn’t a great UX. Network on mobile is flaky in general, and you should anyway let the user see the data offline on a mobile app.

However, most apps do not need a full blown offline experience. Let’s say you are developing a grocery subscription app. It’s safe to assume that if a user opens the app offline, they don’t expect to see anything more than they have already seen. This is true for most of the apps.

It’s sufficient to only display the data that was pulled before. You can display an error for any other screen or action.

In short, do this:

• Cache the data locally and use that instead of the data from API
• Display a persistent banner/notification to let the user know that the data may be stale and the app is offline
• When user navigates to a page which needs data not in cache, display a full page error
• When user takes an action such as submitting a form, provide feedback to user that the app is offline and cannot do this. Feedback can be in the form of a toast message or notification.

User gets to see the available data, with the full knowledge that internet is required to see the latest data or to take any action. It’s also relatively easy enough to implement, compared to a complete offline solution where app is fully functional offline and syncs to server when internet is available.