Installable Web-Apps.
There’s a lot of reasons why the concept of Web-apps is awesome.
I really like the idea of Native Web Apps. I love the idea of using Web technologies (or “the HTML5 stack”) to build applications. As a user, I love being able to just visit a URL and start using my favorite apps on the browser, and even pin the tabs for those I use regularly, always knowing I’m getting the latest version of them.
However, there’s always been something missing behind these concepts when it comes to bringing the full experience of an app to the users.
The Standalone experience
The UX of a regular app is generally like this:
1. Go to a Website and find the Download link for the app.
2. Once the package is downloaded, the app has to be installed. This could sometimes mean the user needs to find the downloaded-package first in order to install the app.
3. This one is key: Once the app is installed, it’s a Standalone App — the user has some OS-level advantages: search-ability, to find and launch the app with stuff like Spotlight/Alfred; shortcuts, like Desktop Shortcuts on Windows or Add to Dock on OS X; an active app icon, on The Dock in OS X or in the Task Bar on Windows; easy switch-ability through CMD+Tab or Ctlr+Tab, and so on.
6. When the app has an update, the user gets a notification and from there an update flow begins: download update, install update and restart app.
7. If the user no longer wants or uses the app, it can be uninstalled.
These are the things that ultimately add the to “feeling” of an app. It’s not only about how well or smoothly the app performs compared to a web-app, or if it’s offline-capable, or how the UI is exactly like one of a native app or whatever.
But then, App Stores…
On mobile, the story’s a bit different, thanks to App Stores; they provide a simpler UX for discovering, finding and installing apps:
1. The user doesn’t need to go to a website for a download link; going to the Store and searching for the app is enough. From there, just download.
2. Once the app is finished downloading, it’s installed immediately and automatically, and its icon is placed on the Homescreen of the mobile OS.
3. The user also then gains OS-level features: add to Dock, switch-ability, search-ability, organization through folders, etc.
4. The mobile app can of course also be uninstalled, which is particularly important on Mobile, as you’d want to free-up space on your device or just un-clutter your Homescreen.
Again, these are features that add to the whole “app experience” or “feel”, that are not related to what the app itself can do or how good it does it.
And of course, these are the things that we’re deeply missing on our Web-Apps, if they are only usable through the browser without an option for “Standalone-ability”.
But…
Workarounds
There’s already some things we can do as developers — and we’ve been doing for a while — to shorten the gap in this particular area.
For instance, On Windows and Linux, Google Chrome offers the option to create “Application Shortcuts” from any website; mainly this creates the “standalone” experience that allows the user to have a Desktop Shortcut of your web-app, which mainly removes the browser chrome, but also provides switch-ability, and since it’s just a shortcut, it can be easily “uninstalled” by just deleting it. No need to do anything as a developer to provide this — maybe just include a nice favicon for the Application Shortcut Icon.
A similar approach has been available in iOS since its beginnings, with the “Add To Homescreen” option of Mobile Safari; just like desktop Chrome, it provides the option to add an App Shortcut of any website in iOS’ homescreen. However, there’s some stuff we’d need to do if we want to make it truly standalone, add an icon and remove the browser chrome off our web-apps when launching them from the homescreen. This option also allows us to add a Splash Screen image to our web-apps.
On Chrome for Android it’s also possible to “Add to Homescreen” and it works similarly as in Mobile Safari.
It’s not enough, though…
We need a better “meta-app experience” if we want Web-apps to be successful.
For Web Apps to be successful they need to work how the user would expect an native application to work. The ability for the developer to control how their web app is launched is just one part of UX that needs to be solved. — Paul Kinlan
The main problem with the “Add to Homescreen” approach is that these options are not easily discoverable in the browser UI; they’re not easily surface-able, either — these options are generally buried two or three clicks away in the menus, and most importantly, there’s no programmatic way to do these things.
Here comes the Web App Manifest!
Turns out Firefox already has (and has had for a while, actually) a good implementation of most of the solutions to all these obstacles, and it all starts with the Web App Manifest.
One very important note: this is available for all current versions of Firefox: Firefox for Desktop, on Linux, Windows and OSX and Firefox for Android. It’s also available on, but not exclusively to, Firefox OS.
Here’s a presentation of Firefox OS implementation.
Wouldn’t it be nice if we could just install an app straight from a website?
The great thing about the current implementation of Firefox’s Web App Manifest for Open Web Apps is that it allows developers to provide, in my opinion, a great experience for the user that merges the best of The Web with the good UX a Standalone app has to offer on the OS level.
To give an actual, real working example, you can just go to Reeddit’s homepage (note: built by me) on any current Firefox browser.
Installing a Web App
The whole UX is enabled by checking if the user is viewing the page from Firefox, of course, and then checking if that version of FF can install Open Web Apps. In Reeddit’s case, if all of these is true, I show an “Install App” button.
Once the user clicks the Install button, Firefox itself will ask for confirmation of intent with a rather nice, minimal, unobtrusive UI.
If the user confirms the web-app installation, and once the app is installed, the user will receive a OS-level notification that if clicked, will immediately launch the app.
Merging the best of The Web with a Standalone App experience
At this point, one great thing has happened already: instead of a ‘Download’ link, that just downloads a package that then the user has to find to actually install a “regular” app, with the Web App Manifest, Firefox allows you to create an Install button from your website, that after only two sequential clicks of the user, will have your web-app already installed and ready to use!
This brings the discoverability, ever-growing reach and accessibility of The Web and its inherent URLs, and combines it with the simplicity and convenience of installing apps from an App Store.
Once the web-app is installed, you get the same OS “meta-benefits” as any other installed, “regular” standalone app: clean UI without any browser chrome, search-ability, switch-ability, dock-ability/desktop shortcuts, active app icon, and the other regular OS app stuff. On OSX, the app in automatically located on the Applications folder, for instance.
And because it’s just a web-app, there’s not an explicit need to “update” your apps. The best of both worlds.
Is this really a good idea?
As I’ve said, the possibility to add an “Install App” button is only available on Firefox. The sad news is that it won’t probably ever be available out of FF, mainly because it’s considered a not-so-good-idea to give offer this programmatic solution.
The main reason is that allowing developers to show an “Install” button on their pages could be abused and get out of control, potentially resulting in a lot of bad and annoying experiences for the users, if only left to inconsiderate developers.
The result of that discussion is that the API is now removed from the Manifest Draft ☹. Now the focus is on the browsers themselves providing the option to install the web-apps, based on some different heuristics, like how many times the user has used the web-app, if the app is mobile friendly, if it has offline support, and so on.
You can be part of the official Manifest discussions regarding this, here.
Give it a shot on Firefox!
The Installable Web App concept is in my opinion one of the most important aspects of making Web-apps feel like regular apps of the OS by making them Standalone, without the concept of the browser surrounding them.
I’m really glad that Firefox has implemented this, as it represents a glimpse of what a good app experience on The Web could be (and in a really easy way with a simple API, by the way). Microsoft is also considering the possibility of implementing the option to install apps from their new browser.
For now, we can easily include our own Manifests and add our optional “Install App” buttons to our web-app pages so they can be installed from Firefox — all while remembering not to abuse the API and trying not to annoy our users!
Let’s make our Web-Apps Installable!
