The one thing you can always count on when it comes to the web is change. When you are writing for native platforms, APIs and run times change maybe once a year, but in the web world every day can bring change with every browser update, or every new version of a framework. With all this change, web developers have gotten excellent with advancing with the times.
One area that has been morphing over the past few years is that of the Web App. With every platform and every browser exploring new iterations, it’s tough to comprehend what options are out there for web developers. Web App, Packaged App, Hosted App, Hybrid App and installable Web App, are often misunderstood from within the community. Let’s clear that up.
The Web App
Web Apps in the most basic deviations are websites all served under a consistent experience (and often under a consistent domain). The differences between a Web Site and a Web App are often hard to distinguish. I often hear developers claim that if it’s not a SPA, then it’s not a Web App, it’s just a Website. I don’t believe that is true. I hear many users consider Amazon.com or IMDB.com as both being Web Apps, yet neither of them are SPAs. In the simplest terms, a Web App is a website geared towards a specific set of user scenarios (shopping, finding info about movies, or checking the weather), like native apps. Any App that is found on the Web, or written with web technologies (HTML5, JavaScript, CSS) is a web app. Therefor I generally refer to any app or site on the web as a Web Site. It keeps it easy.
The Packaged App
The Packaged App is a type of web app that distributed in its entirety to a user through a single download. Generally, we see packaged apps within App Markets. Packaged Apps have these characters:
- Downloaded in entirety through a store or market
- Generally offline be default, as all the code is living on the users device
- Retrieve data from the internet via services similar to native apps. generally called via ajax
Some Markets, such as Window Store, Amazon App Store, FireFox OS, and Chrome App Store, enable you to submit packaged apps directly to the market without the need of any external packaging tools. These markets also expose additional APIs for packaged apps that aren’t available to apps via the browser. Other markets, such as iOS App Store and Android Play require a third party utility such as Cordova to enable packaged web apps. These third party Cordova like utilities also provide some missing APIs not offered by default to the packaged apps.
The MSN sports app is a Hosted Web App. It makes data service calls just like a native app, but it’s written in web technologies
Vector Runner by TreSensa is a Packaged Web App in the FireFox App Store. In runs offline just like any other game.
The Hybrid App
A Hybrid app has major functionality in both the web portion of the app, and the native portion of the app. A hybrid app is generally not cross platform because the native portion is generally written to platform specific code. The Major characters of the hybrid app are:
- Generally use native code to build features un available in HTML5, or to provide performance or security gains to particular portions of app
- Because they are part native, will require synchronization between web and native releases
- Web portion can be packaged or hosted (or some of both)
Hybrid apps can give you the best of both words, as you can do anything a native app can do, but also iterate quickly with web code. Unfortunately you often get the worst of both worlds as well. Due to the native side of the app, you still often need to do store app releases for updates, but now you have to manage syncing with your web server code.
The Hosted App
Hosted Apps are web apps submitted to app markets that point to web content that remains on the webserver as appose to being packaged and submitted to the store. Hosted app’s have these Characteristics:
- Have a thin layer of native code, usually containing a webview and / or an app manifest that is submitted to the market
- Hosted apps don’t limit the language or frameworks you use to write your app (since it remains on the web server, you can write you code in php, Java, ASP, Node.js, or others)
- By default have no functionality when device is offline (just like web)
- Can Share resources with browser accessible web app
This is the most popular type of web app in the Chrome App Market, and a growing trend in many markets. Hosted apps bring a lot of benefit for companies that already have a full featured web app, and don’t want to start from scratch with native. It also allows web developers to not only continue to use their skill sets and frameworks but allows them to continue to use the same workflow they use for the web. However the top benefit of hosted web apps is that you don’t need to push a new version to the store every time you need to update your app.
The Economist is a Hosted Web App in the Windows Store. It’s indistinguishable from a native store app
Hosted Web Apps can be created with Cordova as well for iOS, Android and Windows Phone, however it will require a few additional steps to get the Cordova API access. On Android, Windows and Windows Phone, we have a great tool called the Web App Template that makes hosted apps a snap.
Installable Web App
Installable web apps are similar to hosted apps, with a defining feature that Installable web apps are based off of a manifest JSON file. Installable Web Apps are not quite standardized (W3C spec in development) and potentially can be serviced via an app store as well as installed directly from the web. Characteristics of an installable web app are:
- Content is hosted on web server and served at runtime (like a hosted web app from a app store)
- App defined by manifest JSON file
Currently this feature ships in Chrome 38 for Android and newer, coming soon to FireFox, and labeled for “under consideration” for IE. The good news is you can upgrade your site today with it. There is at least one polyfill out there for the Manfiest for Web Apps that adds the functionality of the web app to your site. Check out ManUp.js written by yours truly.
Conclusion
In conclusion… the web rocks. The models we have available to us for building apps are more varied and far superior than any other language. Each of these app models represent a different paradigm of web app and although others may vary a bit on the terminology, the products are all the same. These web app models are all newly defined and will mature over time, but there is no reason to wait to adopt them. If you have a web app, there has never been a better time to extend your reach in today’s app markets.