What kinds of apps are there?
--
When I’m using an app on my phone I don’t care what kind of app it is as long as I can do what I need. But if I want to have a mobile app built, suddenly there seems to be so many different choices to make.
Native or web-app? Cross-platform or coded-per-platform? Gamification? Notifications?
How do I know what kind of app I want?
This post builds on my previous one “How apps work”. If you haven’t read that yet I suggest you go back and take a look, especially if any of the concepts in this post don’t make sense.
This is the second post in my series on “How to build an app”. Check there for context to the whole series, and links to the other articles.
In this post I’ll be looking at what goes into the three main different kinds of apps you can build for phones and tablets.
Let’s dive right in.
Main Types of Apps on Mobile
There’s three main types of apps to choose from on mobile.
- The first kind of app is the native app.
- These are harder to build, but
- provide full access to the power of the phone or tablet
- The second kind of app is the web app.
- You know this as a website or online app.
- These can be optimised for mobile
- The third kind of app is a hybrid app.
- These apps aim to be the best of both worlds:
- a native app that uses web functionality.
In the previous post on how apps work we learned that apps are a part of the fabric of the Internet.
The truth is that even the most simple native app has some Internet functionality built-in.
For example if I make a calculator app then upload it to the App Store and it crashes when customers use it, I as the developer can, over the Internet, get that information transmitted to me via built-in analytics inside the app.
My app can handle notifications that it receives over the Internet.
When I want someone to download my new calculator app I advertise it and when someone clicks that Internet based ad, my app can know how it got installed and activate a special promotion.
These are all ways that even a very simple app interacts with the Internet. Put a sticky note on this idea, and we’ll come back to it.
Web Apps versus Native Apps
We learned in the previous article that developers have to write code and create a binary package that is uploaded to the App Store before someone can download that app.
Working with the App Store and Google play store can be a big problem during app development.
Web apps are basically websites. Developers don’t have to get approval from Apple or Google for their website. A Web app has interactive functionality such as login and dynamic page generation. Thanks to JavaScript in a web app users can interact with maps, cards & other interactive content. They can do a lot of things real native apps can do.
But to create a Web app a developer doesn’t need to write native code to build a package and upload it to an App Store.
Webapps are written in a combination of human readable text, markup language and scripting. Once written the web app is “deployed” which means it is copied from the developers computer up to the cloud.
This can be almost instantaneous. Deploying a website can be seconds or minutes at most. When a developer deploys a Web app the very next time anyone visits the website that visitor will see that updated functionality.
Although web apps are just websites, meaning they are deployed on a Web server on the Internet instead of installed on someone’s phone there a lot of things you can do to improve the experience and, with effort a good developer can make them work more like a native app.
Responsive and Progressive Web Apps
Responsive web apps are the biggest improvement developers can make to web app experiences on mobile. So much so, that they deserve their own heading in this article.
The word responsive here means apps that can change to fit the exact size and shape of an iPhone or iPad. Responsive web apps work when the phone is in portrait mode, that is normal phone use with a narrow screen. Or in landscape mode, that is rotated on its side; with a wider screen.
Responsive web apps also can hide clutter that typically appears in a highly detailed desktop webpage. Hiding clutter like this makes the webpage appear more quickly and work much better for people who use the app. Responsive web apps are more user-friendly.
Google has promoted the use of progressive web apps or PWA’s. On supported devices like newer android phones PWA’s can access some of the native features of the phone or tablet.
Progressive web apps work by having a special file called the manifest on the web server. When a phone or tablet accesses the web server to view a page the manifest details how the website can be bookmarked on the phone or tablet’s home screen.
The Web View
Tap the bookmark on the home screen and the PWA is launched in a full screen web view by the phone’s native browser, be it mobile Safari on iOS or mobile Chrome on Android.
What is a web view?
A web view is a web browser for example Chrome, Safari or Internet Explorer; except all of the buttons, location bar and everything have been stripped away so that only the web page part remains.
When you are reading an email and you find that it looks exactly like a web page that’s because it’s rendering in a web view.
Image credit: undraw.co
Because some webpages can be stored locally the PWA can even work in a limited way when the phone is not connected to the Internet.
You can try this out with Trivago.com or Starbucks.com — use the save to home screen function of your web browser and then open trivago from that bookmark on your home screen. You should see a full screen experience.
The Store Bought Experience
The important difference that allows you to tell between a Web app or a PWA and a real native app is that only the native app is installed via the App Store or Google play store.
Only the native app can directly access native features such as Bluetooth and microphone. Also the full power of the phone or tablet can only be accessed by native apps.
Also there’s the install experience. So for PWA’s and web apps “installation” involves bookmarking an app to the home screen and does not engage user trust in the same way as installing an app from the App Store. It’s also quite confusing, especially on iOS.
If you are considering building a web app ensure that you try out Trivago and other web-apps on Apple iOS and older android phones to understand what kind of experience your users will receive.
Progressive Web Apps — or PWA’s — are still web-apps. If your customers are on Android or are B2B, you could consider a PWA for your app.
If you know your customers are primarily on Android, or you have a captive group such as in a B2B solution where you can specify the platform, you could consider a PWA. But remember that a PWA is still, despite all the service workers and talk of notifications, is still really a web-app.
The third kind of app is the hybrid app: it’s a combination of web and native app. How does it work?
Hybrid Apps: Web and Native in One
Like a native app the hybrid app is installed from the Apple App Store or Google play store. Also like a native app the hybrid app can receive notifications, use the camera, microphone, Bluetooth and generally access the full power of the phone or tablet.
Hybrid apps also include web views to show Internet content. Remember when views from our discussion of PWA’s? This works the same as when you view an email as webpage.
Let’s go back to the example of Zombo from the previous post.
Zombo wants an app with two tabs: a home tab and a profile tab. They want to have the app in the Apple App Store and Google play store.
Hybrid Apps are got from the App Store
When Alice downloads the Zombo app from the App Store onto her iPhone she can go into the profile tab and use the camera to read a barcode from Zombo’s latest catalog and access special offers code. She can receive mobile notifications if Zombo launches new special deals. Alice can log into the app and store her username and password in the secure keychain for her phone.
When Alice opens the home tab on the Zombo app inside that tab is a web view that downloads the latest content from Zombo’s web server. Inside that web view on the home tab Alice can receive special offers tailored to her account which she logged into on the profile tab. This is just like using the Zombo web app in a web browser. However if the Internet is not available Alice can still view cached content in the Zombo app.
Best of Both Worlds?
These types of hybrid apps can provide the best of both worlds. They include many of the benefits of a web app and a native app in one. Hybrid apps can be a good way of including web functionality from your existing web properties into both an android and iOS app.
The drawback with hybrid apps is that they’re expensive to build, and can be buggy and complex to maintain. The experience when navigating to other pages in the web app can be complex for example if a user clicks on the link inside of a web view it may open an external web browser and confuse customers.
But they are undeniably the most powerful and flexible of all the app-types on offer.
Cross-Platform Apps
There is one other important kind of app: the cross platform app. These apps are built using special technologies and frameworks that allow developers to create an experience that is close to native but which will work across different platforms such as iOS and android. We will look more at cross-platform apps in a later article.
Summing it all Up
All right to close it out this article lets summarise what we’ve learned.
There’s three main kinds of apps: native, web app and hybrid.
- Native apps are powerful but hard to build
- require code to be written even for small updates, and
- packages need to be uploaded to the App Store
- whenever you want to change them.
- The packages are not human readable
- We call these binary packages.
- Native apps are the only way to reliably access the full power of the phone or tablet.
- Features like notifications, Bluetooth, camera, and microphone are only available generally to native apps.
Web apps or online apps are websites designed for iOS or Android.
- Because they are online changes appear straight away.
- The code for web apps is easier and more human readable
- Responsive web apps are the biggest improvement to apps on mobile
- They change the size and shape to fit mobile screens
- They can be less cluttered and easier to use
Progressive web apps can be bookmarked to your home screen
- When launched they appear in a full screen window
- On some platforms PWA‘s can use technologies to provide some of the features of native apps
- Responsive web apps and PWA‘s are still websites
- Native apps are installed from the Apple App Store or Google play store
Hybrid apps are native apps that have some web views
- They are more complex than both native and web apps
- They can have the best of both worlds
Next in series: How to Build an App — Pt 1 Design
Images (where noted) are the work of Katerina Limpitsouni. Check Katerina’s stuff on undraw.co.
