Web Apps

A few months ago I made a little dieting plan website on a Saturday afternoon, Randomly Skip Breakfast. Basically it is the 5:2 diet (two days fasting) but easier as you only skip breakfast.

I recently finished it having been busy with various projects and wanted to see how quickly it could be made into a Web App on various platforms.

iOS

Apple Docs

Actually in many ways the easiest as it doesn't involve a market; this was how iPhone Apps were meant to work. You don't actually need to do very much: a single line is all that is required to declare it as an "App".

<meta name="apple-mobile-web-app-capable" content="yes" />

But to make it look good you should add icons:

<link rel="apple-touch-icon" href="img/touch-icon-iphone-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/touch-icon-ipad-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/touch-icon-iphone-retina-precomposed.png" />
<link rel="apple-touch-icon" sizes="144x144" href="img/touch-icon-ipad-retina-precomposed.png" />

and to have black title bar:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

I also used the Add 2 Home library to prompt users to add it to their homescreens.

Time: about half an hour.

Ease: very easy but Apple documentation wasn't so clear and my 'precomposed' images do not seem to be treated as such. (There is a solution on Stack Overflow, so I could easily fix this.)

Results: very good, in many respects appears as a native App (and it is possible to do very nice things in this way if you take the time to polish it, though many of these changes may make worse for other platforms).

Chrome Web Store

Google's tutorial

This was pretty easy, as for a webpage App you just need to create an icon and a json manifest (which can mostly be copied and pasted from another example). I did have to pay $5 to verify my account (normally you will also have to prove you own the domain too).

It would have been possible to make this a packaged app, which would give a more App like experience but this would have required actually including the page and assets rather than just a link to the website.

Time: about twenty minutes.

Ease: easy, though had to verify with Google.

Results: Big shortcut to webpage.

Firefox OS (Firefox Marketplace)

Mozilla Guide

Quite straightforward in my case. Only thing that I wasn't aware of was the necessity of having all external links have the attribute

target="_blank"

to ensure they are opened in the browser rather than within the app.

Time: about half an hour, then ten minutes to fix and resubmit.

Ease: Medium, you have to configure server to serve the webapp manifest in a particular way: see the documentation which gives the configuration for common set ups. There are also some platform specific issues that I was unaware of such as lack of back button in Firefox OS if in fullscreen (App) mode.

Results: Works well and gives a fullscreen (iOS like) experience on Android Firefox, don't know how well it works on Firefox OS as I don't have a device. The Android implementation doesn't seem to give quick access to your 'apps'; this may be a Google Play restriction.

Thoughts

I was actually quite impressed with these platforms; they make it really easy to package an App in a convenient way for users, but leaves you in control. The idea that a new platform requires minutes creating some metadata and assets, rather than an entire rewrite is compelling; making any money is another matter.