HTML Manifest

Bruce Lawson on the spec that brings the benefits of installation to web apps

The web has inherited many capabilities that were formerly the sole preserve of native apps — for example accelerometer capabilities, geolocation, drag and drop, and video and audio capture with WebRTC. This, coupled with that fact that browsers have made significant performance gains, means the technological gap between web and native apps has never been narrower.

From a consumer’s perspective, one of the major differentiators between native apps and web apps is the ability to install them. This is especially true on mobile devices. The possibility of tickling a homescreen icon into life with a single tap offers a huge usability advantage over opening a browser and finding a site — even if it’s bookmarked to the browser’s start screen.

Bridging the gap

The new HTML manifest specification aims to bridge this gap. Take a look at the official spec at w3c.github.io/manifest, or read about it at html5doctor.com/web-manifest-specification/. You simply link to a manifest file from your web app, like this:

<link rel=”manifest” href=”/manifest.json”>

The manifest file is a simple JSON file. It tells the browser information such as the application’s name, whether to open in portrait or landscape mode, whether to open fullscreen or whether to show browser chrome. It also points to a list of icons, from which the browser will choose the one appropriate for the platform.

You can tell the browser the scope of your app — that is, you can set a boundary for an app. This can either be a domain, or a directory within that domain. When your user navigates away from the scope (for example, they follow a link from inside your app to an external page) the browser can give the user an indication that they’re ‘outside’ your app. This is useful for security, because most apps are fullscreen, and therefore there’s no URL bar to show the address the user is visiting.

Save to homescreen

This is enough information so that supporting browsers can save an icon to the homescreen (or desktop) that, when activated, takes the user directly to your web app, with no browser chrome. Unlike native apps, which must be re-downloaded and re-installed when they change, the web is instantly updateable. Because your app actually lives on the server, any change you make is instantly seen by the user.

Saving an app to homescreen is supported in Opera for Android, Chrome for Android and is coming to Firefox on Android. Microsoft is also showing interest. A similar, but non-standard mechanism is available in iOS using the ‘apple-mobile-web-app-capable’ meta tag. There’s no reason why you can’t use the proprietary iOS method in conjunction with the newly standardised HTML manifest, on the same page — browsers that don’t support it simply won’t allow (or offer) to save an app to the homescreen.

Additionally, Opera and Chrome offer a mechanism called a web app install banner, if a manifest is present and other criteria are satisfied (e.g. the user has engaged with the site twice in five minutes, although this heuristic will change). Combined with a Service Worker, which makes web apps usable offline, the HTML manifest promises to bring users the UX advantages of ‘installing’ apps, without the heavy downloads or storage requirement (because they only download metadata and icons) or the clunkiness of the re-download, re-install loop.

Web developer Bruce Lawson is a passionate advocate of the Open Web and lurid hair dye. He’s also the author of Introducing HTML5

This article originally appeared in issue 270 of net magazine.