Offline Capabilities: Native Mobile Apps vs. Mobile Web Apps

Lee Whitney

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:

  1. Browser application caching of pages
  2. Local storage
  3. 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:

  1. The total size of data you need to keep offline
  2. The number of data items (records) you need to keep offline
  3. 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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.trianaasociados.co Ricardo Triana

    Awesome, awesome!!!

    Very simple, to the point!!!

    Congrats.

  • http://www.creative4all.com Mohamad Ghneim

    Thank you, this article is very helpful…

  • Pranjal R Nigam

    Hi,

    A very informative article on mobile-app caching.

    Where can I see some downoadable mobile-app (web-app) application with source code?

    Thanks
    Pranjal R Nigam

  • Dutchee

    Quoting: “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”

    Why this? With something like phonegap you get access to this specific device support as well… and you’re still having the pro’s of a mobile web app…

    It’s a pitty you had not mentioned this in the article… at least mentioned it…

    • http://www.whitneyland.com Lee

      Hi Dutchee,

      I consider Phonegap a native solution which is why I say you can’t take a picutre in a mobile web app. While it’s true that PG uses HTML/CSS technologies, it still requires wrapping in a PG layer to give access to device abilities. There are advantages to a PG solution, but there are also trade-offs which make the decision to use it (like everything) depend on the specific goals of the app.

      Thanks for your reading and your comment,
      Lee

      Quoting: “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”

      Why this? With something like phonegap you get access to this specific device support as well… and you’re still having the pro’s of a mobile web app…

  • Pete

    Was hoping for a bit of information in this article, but there wasn’t any: it just listed obvious 101 approaches to offline data. How about talking about the offline storage data options?

    • http://www.whitneyland.com Lee

      Hi Pete,

      I talked about Browser application caching, Local Storage, and Local Database methods.

      Were you looking for more detail, or other technologies not mentioned here?

      I didn’t discuss native app offline solutions or advanced syncing, which are also interesting, but would require a much longer and/or follow up article.

      Thanks for your comments,
      Lee

  • http://www.onlymobilepro.com onlyMobilePro

    Hi Lee Whitney,

    Thanks for the article. This is a very informative article on the mobile web app.

    My opinion is, the technology of HTML5 offline web app is still not widely used among industry yet… I think the offline data storage and capabilities in accessing local hardware (such as camera) are still the biggest concern for most of the web developers. We can easily see the HTML5 offline web app lose its advantages if compare it with Native app on such way.

    Anyways, I believe in the coming near future, the HTML5 offline web app can works exactly like what Native app does on mobile devices.

    Best Regards,
    onlyMobilePro
    *********
    Web Designers & Developers Tutorial Blog – http://www.onlywebpro.com
    Mobile Development & Design Inspirational Blog- http://www.onlymobilepro.com
    **********

  • http://openmobster.googlecode.com Sohil Shah

    Great article. Al though it touches just the storage aspects. What are your thoughts on Synchronization of data aspects and keeping the offline scenario as seamless as possible in a mobile app (native or web).

    Something along the lines of working offline, the device discovering a network connection, device automatically starts a sync session with the server.

    Also, about Pushing changes from the Cloud to the App as part of a sync from the Cloud to the App.

    What are your ideas on Sync Frameworks that make this happen

    Thanks
    Sohil

  • Ingolv

    We are looking to develop a enterprise-strenght mobile app where offline is critical (holding patient data for nurse in the field). What is your experience with the offline capability of mobile app dev platforms? Is there a platform that is particlarly suited? Ingolv

  • http://fast-framework.com Emiel Vermeulen

    I believe that working offline is the near future, see http://youtu.be/-kn7Rj7He-c