Mobile applications do not always have the network connectivity needed to access real-time data. To accommodate fo this, provide an offline solution with your applications which will enable your user to complete their job regardless of network connectivity.
As best practice, an offline-enabled Fiori application should be syncing data with the server regularly. The task of syncing should not be solely left to the user as this becomes one additional but important task for the user to do.
Apart from background sync, provide a manual way for the user to sync for situations where it is critical to sync data or retrieve data from the server. This is important when the user knows in advance that they would be entering a low or no network area.
A sync button allows the user to perform a manual sync when they wish to exchange data with the server. Placement of the sync button depends on the nature of the job. If the user is not expected to sync often, place the sync button in the profile or settings menu.
If the user needs access to the sync button regularly, surface the sync button as a global action. This maybe on the Overview screen in a hierarchical navigation based application or at the first screen of every tab in a flat navigation based application.
In an offline application, it is important to communicate at all times to the user the state of network in the application as this could disrupt their work. There a few ways this can be done through the application.
The status bar should change color in offline mode. It helps the user to recognize that the app is in offline mode on any screen in the app.
Display a spinning sync icon next to the Sync Button to communicate to the user that the app is syncing.
When the app finishes syncing, the timestamp under the sync button should refresh to reflect the last sync time.
When the user goes back to other app screens during the syncing process, a syncing indicator will appear under the header to show the progress.
Use an offline banner when the app goes offline. This can auto dismiss after a few seconds or be persistent.
Use sync banners if the user wishes to continue working after triggering the sync. Provide a way for the user to cancel the sync or close the banner. A spinning sync icon will indicate that the sync is in progress. Once the sync is completed, communicate to the user that the sync was successful by replacing the text with ‘Sync Completed’.