A Hosted Web App should not be confused with a “Hostess Web App” which would be a web app commemorating the world’s finest junk food, the Twinkie, whos greatness has only been supplanted by the deep fried Twinkie (frozen Twinkie dipped in batter, deep fried and the served on a stick). No, although just as cool, a “Hosted Web App” is a store app (think google play or windows store), where the content of the app is hosted on a web server. As in, a web site.
The experience for a user is quite familiar. The user searches the app store to find your app, clicks on a button and installs it on their device and then launches it like any other store app. When launched, at run time the app loads content from the web server (just like a web site). Although the content may be the same (or in some cases augmented) the experience for the user is different. They do not navigate to a URL within a browser, nor do they have the browser experience of having “chrome” around the page and generally the experience is encapsulated in the app. For users, it’s better than sliced bread, it’s like the crustless bread where they sell you less bread for more money.
The developer experience is quite familiar as well. The app lives on a web server, so the work flow is no different than it is for developing and publishing your website. You can use grunt, bower, npm or any tools you currently use to build a web site. You don’t need any special IDE as again, it’s just web code, so you sublime text, Visual Studio, note pad or emacs. The editor you currently use is probably still the best editor for building Hosted Web Apps. Now when you want to update your app, you no longer need to submit an update to an app store or go through any approvals. Just update the code on your web server and your done. Nothing else to do but turn on the Xbox and enjoy your evening. It’s pretty simple.
SO, I knew you were going to ask it, so let’s talk about HOW to write a Hosed Web App. Well the app part we mentioned is easy, as it is your web code on your web server. Submitting it to a store gets a bit more difficult. It’s not difficult because it’s difficult to submit it to a store, but because every store has a different process, and some stores don’t natively support it, so you need a tool like Cordova or the Web App Template to bridge the gap. But for the sake of doing some fun coding, let’s pick a random example…say… the chrome app store and see how we submit a hosted app to that store.
For this example, I’m going to use a game I built a while back called YetiBowl, and it’s hosted on the web here:
http://yetibowl.azurewebsites.net/game.html
It’s a simple game where you are the peaceful yeti who is defending his turf from the would be ravishing of the evil hikers. I’m going to head over to the Chrome App Docs (which are quite a bit out of date) and loosely follow them. Let’s get started!
Step One: Create a simple manifest.
Start a new folder, in my case it’s called “yeti_bowl” then create a text document and rename it to “manifest.json” (don’t forget to take off the .txt extension). The fill it with some code that looks like this:
{
"name": "Yeti Bowl The Game",
"description": "You are the Yeti and you defend your ground from the evil hikers",
"version": "1",
"manifest_version":2,
"app": {
"launch": {
"web_url": "http://yetibowl.azurewebsites.net/game.html"
}
},
"icons": {
"128": "tile_128.png"
}
}
A few items to note that might not be obvious.
1. “version” refers to your version of the app, you can make this whatever you want.
2. “manifest_version” needs to be set to 2 (no quotes) for the store to accept the manifest.
3. “icons” refer to an icon in the package. These are use for local testing, but I’m not sure they do any good otherwise as the store again provides a place for you to upload images.
Step Two: Test the package locally in chrome.
This is a pretty cool feature becuase you can see the experence fully before even uploading to the store. Just go under the hamberger and select More Tools > Extensions. From there, hit the button that says “load unpacked extensions” to select this folder. Then open a new tab, and your app should be in the app list.
Step Three: Upload to the Store.
This is pretty much a webflow but a few things to note in this process.
1. You need to varify your site first by adding it to the google webmaster dashboard.
2. You’ll need not only your 128×128 image, but a screen shot and a larger 440×280 image (see my github repo for examples).
3. You need to pay five bucks, which is pretty cheap considering Apple’s is $100 a year.
Step Four: Tell all your friends!
The sad part is this process is different for each and every store. We must do something about that. The happy part is you can put apps in stores and still maintain all the benifits of a web site. Download my app from the chrome web store, and checkout the code on Github.