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?