How to Make Your App Available Offline

Nowadays, users expect apps to work even when they're offline. Otherwise, a poor network connection translates into a poor user experience. According to Localytics, 21 percent of users abandon an app after just one use. Push notifications, in-app messaging, and offline mode help to retain users. 

Offline mode is a must for delivery apps with GPS navigation, apps for urgent medical assistance, and banking apps.

Users appreciate apps with offline mode because:
 
- These apps constantly work without delays.
- They want to keep working without an internet connection.
- Apps with offline mode load quickly.
- Offline apps hardly drain a phone’s battery.

Even if an app is appreciated by users, lack of offline functionality can make them seek alternatives. Notion, a note-taking app, is criticized for working without offline mode. Trello listened to their users’ reviews and provided offline support for Android and iOS in 2017.

Read also: Two Types of Apps to Ensure Customer Loyalty: Which to Choose for Your Business?

The-Trello-app

How to decide on offline features for your app  

Unfortunately, there’s no one-size-fits-all approach or magic wand to create the ideal offline mode for your app. You have to do your own homework, but here’s a formula that may help: 

  1. Analyze your workflow, determine your business needs, and translate them into app features. 
  2. Prioritize these features as ones your business can't live without, ones that are important but not absolutely urgent, and ones that would be nice to have. 
  3. Decide what you want to achieve through your app. 

Sharing this information with your developers will help them understand your business goals and suggest the proper technologies for a well-tailored solution. To decide on offline functions, you can use the well-known Eisenhower Decision Matrix. It will help you see what’s important and what isn’t. To fill out the matrix:

  1. Write down features and interactions that you want to be available offline. 
  2. Interview users to determine how important each feature/interaction is for them.
  3. Define how difficult it will be to implement each feature.
  4. Put this information into the matrix and prioritize. 

As a result, you’ll have a list of offline features and will be ready to figure out how to implement them.

For example, say you’re considering implementing an offline payment gateway. You can interview users to define how important this feature is for them. Then you can estimate the time and effort to implement it. The position of this feature in the matrix will help you define if it’s worth the trouble.       

The-Eisenhower-Decision-Matrix

How to choose technologies for offline mode

The technologies you pick will have a big influence on how your app’s offline mode works. Consider the following when picking technologies:

Frequency of data synchronization. Reconnecting too often might drain a phone’s battery. But if an app synchronizes too seldom, users might miss essential updates. Work with your developers to find a balance. To do that, you’ll have to investigate how often your users can access high-speed internet. If people use your app for work, define which slots in their work schedules are good for downloading data. The better the data connection, the shorter those slots can be.

Data synchronization cycles and time. Data should be prioritized according to business needs. Some data may be updated once a year, while other data needs to be updated a few times a day. You can determine different synchronization cycles for different data according to the needs of the business. The smaller the data packages requiring high-frequency updates, the better. Your app may not need constant data synchronization. If it does, you can sync data at a specific time. For instance, public transport carriers tend to fully synchronize when vehicles are in depots. At any other time, vehicles forward only vital data, such as data on accidents along the route. 

Managing changes in shared data. If users are offline, changes to data can’t be available to other users. This means that several users may work on the same data without seeing how others have modified it. If you can’t avoid such a scenario, focus on exception handling and determining rules for how to deal with those exceptions. According to IBM Developer, a good solution for many scenarios is to decide that the first update to a data set wins and to ignore any other updates to the same data. 

Handling sensitive data. Private user data can’t be cached at all for security purposes. Downloaded information such as logos and blog posts is stored in a cache folder on a user’s smartphone so it doesn’t need to be downloaded each time the user accesses that content. Any cached information can be viewed by checking the browser’s cache or by pushing the browser’s Back button. This puts sensitive information such as credit card details and usernames at risk. Therefore, make sure sensitive data is not cached.

Method of syncing. Answer these questions to choose the most appropriate technologies for your offline mode:

- Should data transfer be synchronous or asynchronous? 
- Will data be synced automatically or manually? 
- Will the app actively ask the server for updates or will the server itself send new data to the app?

Web and mobile apps can be created with local storage/databases and data synchronization. Let’s check out the details of implementing offline mode for web and mobile. 

Digging deep into the technical details 

There are some differences between implementing offline mode for web and mobile. Let’s take a closer look at the basics of storing and synchronizing data for both web and mobile applications.

Storing data offline for web and mobile

The main difference between web and mobile apps is that web apps store data in the browser, while mobile apps store it locally. 

Tools for storing data in the browser

IndexedDB. Offline web apps get data using offline storage APIs. IndexedDB offers a better API than the local Storage API for storing data in a browser. We suggest you use IndexedDB or a similar alternative for offline data storage. Your app shouldn’t make any HTTP calls so as not to fail in offline scenarios. In low-storage situations, browsers may clear IndexedDB. You can use the persistent storage API introduced in Chrome 52 to solve this issue.

ServiceWorkers. ServiceWorkers operate as client-side proxies. They can intercept requests from clients (windows, web workers, shared workers). ServiceWorkers have a well-determined lifecycle. Google has created two great libraries – sw-precache and sw-toolbox – for caching static and dynamic content. These libraries are good for implementing your own offline strategies.

Service-workers-for-a-web-app

Ways for a mobile app to store data on a device

SharedPreferences. To create an offline app for Android, you can use SharedPreferences

Local (Internal/External) Storage. SharedPreferences method is too limiting for storing pictures, serialized objects, XML, JSON, and other files. You can use the internal/external data storage method for such cases when you have to store data to the phone filesystem that doesn’t require relational database capabilities. Internal/external data storage ensures prompt storage of data and is simple in use. Each piece of data stored using the internal storage method is private to the app. If the app is uninstalled, the data is removed from the device.

SQLite database. Android and iOS both support SQLite databases. Each mobile platform provides its own database management tools. SQLite runs well on phones and provides apps with the speed and power of a full-featured relational database. SQLite uses a single file to store data. An SQLite database can’t solve too much on the sync and conflict resolution side; however, it’s an easy-to-use option for queuing and caching data. If you need to store information that has to be queried, consider an SQLite database.

Offline-sync-for-a-mobile-app

 

Ensuring data sync for web and mobile apps 

When an app is used offline, there are many actions and much data you have to sync with the server. This syncing can happen whenever an internet connection is available. For web apps, user actions can be stored in IndexedDB as jobs to sync. As soon as the network is available, these jobs can be processed one by one. With a mobile app, it’s likely you’ll have both client- and server-side storage. Let’s look at the details of data syncing for web and mobile apps.

Offline sync for a web app

When you store offline data in the browser, you have to upload it to the server whenever the network is available. To make sure data syncs properly, do the following:

- Determine the smallest amount of data to store locally.
- Select as little data as possible to transfer from the server to the device.
- Set a trigger to initiate the sync, manually or in the background.
- Configure conflict resolution.
- Identify and prioritize data sets for syncing.
- Indicate the factors that will trigger a sync.
- Establish a balance between sync frequency and battery drain.
- Elaborate the retry mechanism.
- Send a sync status notification to users.

Offline sync for a mobile app

Using an offline app, users can take actions offline and then synchronize changes with a central repository. To do this, your app will need to manage the flow of information between the server and client. 

In most cases, offline mode is used in situations when users can edit information on the server side and on the mobile side. This is the best case scenario. Even though it may be alluring to create offline apps supporting two-way sync, it’s the most complicated method. 

If you support two-way sync, your synchronization logic has to ensure that data is up to date on the mobile and server sides simultaneously.

There are a number of data storage methods to make an app work offline, and they differ for iOS and Android.

Android. The Android platform offers SharedPreferences APIs that can be used for saving a comparatively small amount of primitive data in key-value pairs. Put simply, a SharedPreferences object is a reference to a file with key-value pairs. When using SharedPreferences, you have a key (which is a string) and the value for that key. The value can be a boolean, float, int, long, or string. Android stores all SharedPreferences files as XML files in a private directory. An app may contain various SharedPreferences files. There are methods which can be used for receiving a SharedPreferences object. One of them is used if an app contains a single preferences file. The other is used if an app contains more than one preferences file or if you want to give a custom name for the SharedPreferences instance.

iOS. To implement offline mode for an iOS app, you can use the NSUserDefaults class to save and update users’ preferences. The NSUserDefaults class delivers a programmable interface, allowing an app to customize its behavior according to a user’s preferences. For instance, you can enable users to save a profile picture offline or add a function that automatically saves documents. The app records such preferences in the user defaults system. In such a way, data is cached, helping you avoid opening the user defaults database whenever you need a default value. As this defaults system is available within your app’s code, any data saved to it will persist across app sessions. When a user closes your app or resets their mobile devices, they still can use the saved information the next time they enter the app.

Offline mode can be the icing on your app’s cake. If you think your app needs offline mode, we’ll be glad to implement it for you.

4.6/ 5.0
Article rating
10
Reviews
Remember those Facebook reactions? Well, we aren't Facebook but we love reactions too. They can give us valuable insights on how to improve what we're doing. Would you tell us how you feel about this article?
Want to make your app available offline?

Yalantis will help you do that!

Get to know us better!

We use cookies to personalize our service and to improve your experience on the website and its subdomains. We also use this information for analytics.

More info