Offline Capabilities: Native Mobile Apps vs. Mobile Web Apps

Many mobile apps could benefit from working without an Internet connection. Here, we take a look at how offline capabilities affect the decision of developing native apps vs. mobile web based apps.

Apps that continue to work while “offline” or “disconnected” have been important since laptops first became common. A classic example is a salesperson that wants to enter data while travelling, and then have that data automatically sync with a server when they get back to the office. Even with Wi-Fi and cellular broadband, there are many scenarios (airplanes, Wi-Fi only devices, remote areas) where people still need to work without a connection. So, when workers need offline mobile capabilities, do we need to develop a native mobile application on the device, for example with Objective-C for the iPhone, or is a mobile web-based app a viable option? It turns out, the answer is changing very quickly, because more HTML5 capabilities like local storage and local databases are being added to mobile browsers to support offline capabilities.

Short Answer: Mobile Web Apps are Ready to Go Offline

The short answer is yes, it is now a practical option to develop an entirely web-based mobile app with offline capabilities for many scenarios. Notice that I say many scenarios, not all. At this point in time, it still depends on what offline capabilities are needed. Specifically, the main factors are how much offline data is needed and what indexing capabilities are required.

How is an Offline Web App Even Possible?

To understand what offline scenarios are good candidates for a mobile web app, it helps to first understand the key technologies that make it possible. Mobile web apps can be built with three core capabilities, and all of these are part of the new HTML5 standards:

Browser application caching of pages
Local storage
Local database

Browser application caching allows a manifest to be created listing pages that should be cached and made available offline. Normally, when you visit a URL, a server request is made to return the page. Setting up an application cache manifest tells the browser how it can use pages already downloaded rather than just immediately displaying an error when there is no longer a network connection. Local Storage

is a standard that retains local web app data (even when the browser is shut down) using a key/value system that works similarly to browser cookies. However, it is different from browser cookies in two important ways. First, cookies are resent to the server with every HTTP request, and it would waste a lot of bandwidth to resend all offline data when the server doesn’t need it. Secondly, cookies tend to max out at around 4k of data, while local storage usually gives an application as much as 5 MB of data to work with per domain. 5 MB may not sound like much, but when used carefully, it can go a very long way in terms of offline local storage. Local Database removes the 5MB limit of local storage and allows data to be indexed so that multiple properties can be queried quickly. This is only an HTML5 proposed standard at present; only Internet Explorer and Firefox have implemented it so far. Safari and Chrome use an older, deprecated system called Web SQL. This means if you need this level of functionality, there is a significant amount of extra work and complexity to support both standards across all major browsers. Hopefully, that won’t always be the case and major browsers will conform to the finalized HTML5 specifications.

So, is a Mobile Web App a Good Solution for Offline Features or Not?

The key here is whether your app needs the higher storage limits (greater than 5MB) and indexing features that come with a Local Database. If Local Database and major browser support are needed, it stacks the deck against a web app because of the extra work and complexity needed to support two very different standards. However, if you can get by without using a Local Database, and your offline storage needs are below 5MB, then using Local Storage and Browser Application Caching alone will allow for a clean solution that works well across major browsers. To decide if Local Storage is good enough, consider these constraints for the app:

The total size of data you need to keep offline
The number of data items (records) you need to keep offline
The number of data properties (fields) you need to search within

If you need less than 5MB at a time offline, Local Storage fits the bill. If you have a large number of records but usually only one field to search on, Local Storage is still a good fit. If you have many fields to search on but the total number of records is small, again Local Storage would work nicely. By answering these questions about your app, you should have a good idea about the practicality of a mobile offline solution.

There is Much More to the Native vs. Web Decision

Here, we’ve focused mainly on issues around offline capabilities for mobile apps. However, keep in mind the more general decision criteria still apply. For example, if you need to allow a user to take a photo with a built-in camera and upload it to a server, a mobile web app simply is not capable of meeting your needs. Beyond the device capabilities questions, there are also the issues of what skill set you want your company to invest in and what types of apps you tend to develop. Finally keep in mind that “native vs. web” is a simplification of the choices. Mobile web apps can be built by just adding a viewport tag to an existing site, adaptive rendering (CSS media queries), and dedicated views for mobile devices. Native apps can be built with the vendor toolkit (like Objective-C), or with an abstraction platform (like Titanium), or by bundling HTML with a native library (like Phonegap). The “native vs. web” dilemma shouldn’t be seen as two polar extremes; it is actually a continuum of choices from one end of the spectrum to the other.

Think Offline

It turns out that the variety of mobile apps that can benefit from offline features is quite diverse. If you’re in the process of making a platform decision to build a mobile app, it’s a good idea to think through all of the offline possibilities that have been discussed above as part of the process. You’d be surprised how many mobile projects can benefit from HTML5’s new offline capabilities. Do you have any experience using HTML5’s caching, local storage, or local databases? Do you use any mobile web apps that employ offline storage?

Frequently Asked Questions (FAQs) on Offline Capabilities: Native Mobile Apps vs Mobile Web Apps

What are the key differences between native mobile apps and mobile web apps in terms of offline capabilities?

Native mobile apps are installed directly on a device and can access the device’s features, such as the camera, GPS, and accelerometer. They can function offline, which is a significant advantage. On the other hand, mobile web apps are accessed via a web browser and require an internet connection to function. They are essentially websites optimized for mobile use and do not have offline capabilities unless specifically designed with service workers for offline use.

How does offline data synchronization work in mobile apps?

Offline data synchronization in mobile apps involves storing data locally on the device when the app is offline and then synchronizing it with the server when the app goes online. This ensures that the user can access and interact with the app data even when there is no internet connection. The synchronization process can be automatic or manual, depending on the app’s design.

What are the benefits of offline capabilities in native mobile apps?

Offline capabilities in native mobile apps allow users to access app features and data even without an internet connection. This is particularly beneficial in areas with poor or no internet connectivity. It also enhances user experience as it allows for faster loading times and reduces data usage.

Can mobile web apps be designed to work offline?

Yes, mobile web apps can be designed to work offline using technologies like service workers and the Cache API. These technologies allow the app to cache resources and serve them when offline, providing a native-like experience. However, this requires additional development effort and may not provide the same level of functionality as a native app.

What are the challenges in implementing offline capabilities in mobile apps?

Implementing offline capabilities in mobile apps can be challenging due to issues like data synchronization, conflict resolution, and data security. Ensuring that the local data is correctly synchronized with the server data when the app goes online can be complex. Additionally, resolving conflicts when the same data is modified offline on multiple devices can be tricky. Data stored locally on the device also needs to be secured to prevent unauthorized access.

How does Azure Mobile Apps support offline data sync?

Azure Mobile Apps provides a client SDK that supports offline data sync. This allows the app to store and modify data locally when offline and then synchronize it with the Azure backend when online. The SDK handles conflict resolution and can be used with various data storage options.

What is an offline-first approach in app development?

An offline-first approach in app development involves designing the app to function primarily offline and then sync when online. This approach prioritizes local data and ensures that the app is always usable, regardless of network conditions. It provides a better user experience, especially in areas with poor or intermittent internet connectivity.

How does Google’s AppSheet support offline capabilities?

Google’s AppSheet allows you to build apps that work offline. It automatically caches data on the device, allowing users to view, add, and modify data when offline. The changes are then synced with the server when the device goes online. AppSheet also provides options to control the amount of data cached on the device.

How does offline data sync work in Android apps?

Android apps can implement offline data sync using various methods. One common approach is to use a local database that stores data on the device. The app can then use a service to sync this local data with the server data when online. Android provides several tools and libraries, such as Room and WorkManager, to help with this.

How can I secure offline data in mobile apps?

Securing offline data in mobile apps can be achieved through various methods. One way is to encrypt the data stored on the device. This ensures that even if the device is compromised, the data remains secure. Additionally, implementing access controls and authentication mechanisms can help prevent unauthorized access to the data.