Mastering Offline Functionality: Ensuring Seamless Performance for Your Mobile App!
Written by Amra Mujčinović Baručija, Software Developer Softray Solutions
Admit it or not, people are increasingly addicted to their phones, and today there are mobile apps for everything you can think about. We don’t even have to talk about the number of phone applications.
Today the Internet is available everywhere, but it is also true that sometimes it can be unstable, interrupted, overloaded, or we can be in a situation where it is not available. There is no doubt that users want to access the application even when the Internet is not available. What to do as a developer in this situation? Where to start? How to face offline mode?
My offline mode experiences:
I will mention all the examples and experiences using the Ionic Angular application. What is Ionic?
Ionic is an open-source UI toolkit for building high-quality mobile apps using web technologies. With Ionic, we create Hybrid applications that blend native and web solutions. The application’s core is written using web technologies, but the app is being shown instead of the user’s browser. It’s run like a native application using the integrated embedded browser, which is invisible to the user. This is possible using a solution like Apache Cordova (PhoneGap) or Ionic’s Capacitor.
Advises for building Working Offline Mode App:
1. Integrate Network API in the application
The first thing we need is Network API which will help us to identify the connection state. For Ionic application, we can use the following:
Cordova packages:
ionic cordova plugin add cordova-sqlite-storage
npm install @ionic/storage
Capacitor package:
npm install @capacitor/network
When the installation is finished, we need to create NetworkService, which will be the point from where we will get information about network status. Here is an example of how to add a listener to always have current connection status:
checkNetwork() {
Network.addListener('networkStatusChange', (status) => {
console.log("Network status: ", status.connected);
//output example: Network status: true
});
}
Mentioned Network APIs have excellent documentation where we can find connection types available in the application and everything we need.
2. Show a proper user message for the offline state
Remember, the offline state is not an error state!
It is essential to communicate with users. It is a good practice to indicate when the connection state changed. Ionic provides a simple way for displaying toast messages using ion-toast.
Think carefully about which functionalities in the application require the Internet and cannot function without the Internet. For such things, think about what message you will use to inform the user about it.
3. Implement Offline Storage
You need to think about storage, where you will store data when you are in the offline state.
There are several solutions for storing: IndexedDB, localStorage, and SQLite. IndexedDB is excellent for storing strings, but there could be problems if we want to store complex data like images. LocalStorage stores key-value pairs.
We need to store database tables and API calls.
For database tables — For small applications, we can sync all data to the local database, but when we have an extensive system, we sync only relevant data to logged users. While the user is using the application in online mode, we are saving data locally to prepare for offline mode.
It is important to store API calls in a local database for API calls. It can help us to detect which data is sent to the server and which API is left to be received. For example, we store APIs offline for POST requests, so it can be done later when the network is available.
With offline mode, it is possible to have an unpredicted situation like conflict when synchronizing data. In this situation, we can define our strategies for solving it. First is that server will keep its data. And second, is that local data will override the server’s data.
SQLite storage
To enable SQLite storage in the Ionic application, we need to add the following plugins:
ionic cordova plugin add cordova-sqlite-storage
npm install @ionic/storage
After adding plugins, don’t forget to add it to app.module.ts to Imports arrays in NgModule.
SQLite is based on SQL standards, here is the example who to create a new table:
this.db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Calls (id INTEGER primary key AUTOINCREMENT, phoneNumber, name, note)');
});Insert value into table:
this.db.transaction(function (tx) {
tx.executeSql('INSERT INTO Calls VALUES (?,?,?)', ['1111111111','Tom Tom','This is regular call.']);
});
Querying data:
tx.executeSql('SELECT * FROM Calls', [], function (tx, rs) {
//...
}, function (tx, error) {
console.log('Calls SELECT error: ' + error);
});
});4. Create a Sync Manager
Everything that is done in offline mode needs to sync when it comes to the online state. This is the reason why we need a sync manager. It will be background synchronization which will automatically apply updates after connecting to the network.
It is necessary to record the API requests locally, regardless of whether we are online or offline. When an API request is sent to the server, and we get a response, then we will update the local database to indicate that the API request finished successfully and we get a response. This approach lets us know exactly which API requests must be sent again. In offline mode, we will not try to send API requests to the server. We will save them locally and wait until we get online. When it comes online, we will send API requests in FIFO order (First In, First Out). This means that the oldest API requests will be sent before the newest. This will be done in the background.
Diagram show us following:
1. User sends request
2. Save request to SQLite: API request, data and finished: false
3. Send request to server
4. Receiving response from the server
5. Update API request in SQLite with finished: true
Conclusion:
Offline functionality is challenging to get started with. But don’t worry. Keep it simple! First, think about possible scenarios for your application and try to prioritize core functionality first to implement it in offline mode. Find a proper Network API for your technology, discover possible solutions for local storage, and create your plan for syncing data.
Offline functionality plays a vital role for users to continue using the app. By enabling offline functionality, companies can ensure that their apps remain useful and retain app users. Offline functionality improves user experience, increases app usage, and makes users more loyal to the app.
Offline functionality gives us a lot of benefits, and your clients will be satisfied.
Resources:
https://cordova.apache.org/docs/en/11.x/reference/cordova-plugin-network-information/#quick-example
