Different Types of Mobile Apps, Native Apps, Web Apps, and Hybrid Apps.
Native Apps: Native apps live on the device and are accessed through icons on the device home screen. Native apps are installed through an application store (such as Google Play or Apple’s App Store). They are developed specifically for one platform, and can take full advantage of all the device features — they can use the camera, the GPS, the accelerometer, the compass, the list of contacts, and so on. They can also incorporate gestures (either standard operating-system gestures or new, app-defined gestures). And native apps can use the device’s notification system and can work offline.
Mobile Web Apps:
Web apps are not real applications; they are really websites that, in many ways, look and feel like native applications, but are not implemented as such. They are run by a browser and typically written in HTML5. Users first access them as they would access any web page: they navigate to a special URL and then have the option of “installing” them on their home screen by creating a bookmark to that page.
Web apps became really popular when HTML5 came around and people realized that they can obtain native-like functionality in the browser. Today, as more and more sites use HTML5, the distinction between web apps and regular web pages has become blurry.
Different Types of Mobile Apps Native Apps, Web Apps, and Hybrid AppsIn 2011 Financial Times withdrew its native app from Apple’s App Store to circumvent subscription fees and maintain closer connection with their subscribers. Instead, it came out with an iPhone web app
Its web app is, in many ways, hard to distinguish from a native app. For instance, there are no visible browser buttons or bars, although it runs in Safari (when accessed from an iPhone). Users can swipe horizontally to move on to new sections of the app. And, due to browser caching, it’s even possible to read the newspaper offline.
These are all features that are available in HTML5. Also available are the GPS, the tap-to-call feature, and, there is talk about a camera API, although I haven’t seen any web app (or web page) that takes advantage of it so far. There are, however, native features that remain inaccessible (at least from now) in the browser: the notifications, running in the background, accelerometer information (other than detecting landscape or portrait orientations), complex gestures.
Of course, one can argue that many apps (native or otherwise) do not take advantage of those extra features anyhow. But if you really need those native features, you’ll have to create a native app or, at least, a hybrid app.
Hybrid apps are part native apps, part web apps. (Because of that, many people incorrectly call them “web apps”). Like native apps, they live in an app store and can take advantage of the many device features available. Like web apps, they rely on HTML being rendered in a browser, with the caveat that the browser is embedded within the app.
Often, companies build hybrid apps as wrappers for an existing web page; in that way, they hope to get a presence in the app store, without spending significant effort for developing a different app. Hybrid apps are also popular because they allow crossplatform development and thus significantly reduce development costs: that is, the same HTML code components can be reused on different mobile operating systems. Tools such as PhoneGap and Sencha Touch allow people to design and code across platforms, using the power of HTML.
Walgreens provides two very similar hybrid apps— one for Android and the other for iPhone. Both apps have multiple sections and many native features such as access to notifications and a Refill by scan feature that uses the phone camera to refill prescriptions:
However, the Shop section in both the Android and iPhone apps uses a browser view that renders the corresponding page of the Walgreens mobile website. Here are three pages displaying the same content in the Android app, iPhone app, and mobile website:
As you can see, all these pages are the same, except for the top header, which is platform specific. The Back button on iOS is translated into a caret on Android; the logo is present on the web page, but not in the app. (The designers have correctly assumed that on the web people need the logo to orient themselves, since they are likely to land on a deep page without navigating through the homepage. In contrast, in their apps all navigation has to go through the homepage).
Banana Republic is such another example of hybrid app; it has used the exact same design on Android and iPhone:
However, the Back button in the Android app ignores the fact that, unlike iPhones, Android devices come with a physical or virtual Back button. The tab bar at the bottom of the page works well in the iOS design, but is clunky and clearly nonnative on Android.