Installable Web Apps with Web Apps Manifests

Last year at Code, Alex Russell launched Progressive Web Apps, an idea that has taken the Front End world by storm in the intervening 12 months.

A key aspect of a progressive Web App is the ability to install it on the user’s home screen. So, just how do we achieve that? Enter Web Manifests (*not* the appcache manifest), an emerging standard for specifying the home screen experience of Web applications.

Learn how you can specify icons (at various resolutions and sizes) splash screens, preferred orientations, related applications and more. We’ll also cover device and browser support, consider some security implications, and more to get you up and running.

Installable apps aren’t new – the iphone could always do it.

A web app manifest can enhance the experience of an Installed Web App.

What do we already know about installed apps?

  • We know that apps will open in its own world; and that closing it is really like minimising rather than completely closing it.
  • We know to get new apps you have to go an app store. It’s often quite tedious. Sometimes we get distracted on the way to finding it. We know we have to wait for it to download…and wait…and then install more on first run…
  • We know that apps can also go onto the home page

All of these things communicate the idea: “my apps are the most important things on my phone”. We care less about the phone than the things the apps represent.

While we are focused on native apps, there are thousands upon thousands of installable web apps. But we’ve encouraged users to think of apps as being more important, or better than the mobile web?

Maybe we haven’t been diligent enough making the mobile web really good? Maybe we spent too much time on IE8 and not enough on the mobile web?

Why are we ok that web apps are stuck inside a browser app? What if they could break out of the browser? What if we could keep it and name it like an app; and collect our favourite sites alongside our favourite apps?

The Web App Manifest specification is the tool for this job.

How can you use it?

  • Link to a JSON manifest file in the HEAD of your site
  • The JSON file sets up the configuration required to make the site installable
  • Some browsers like Chrome and Opera will prompt you to add the site if you visit it often or for a long time
  • This means your site now behaves like an app – it doesn’t have the browser chrome, it doesn’t let you navigate away

Can you still install sites without a manifest? Yes, but you don’t get the same behaviours – they’re just glorified bookmarks. It still opens in the browser, you don’t get any real estate back.

The manifest allows you to set the app’s icons (array of differently sized icons), name, theme, orientation, starting URL, colours of the app’s context bar. Plus there are many more properties which are useful for various use cases – read up to see what you will get value from.

It’s really easy to test manifests – use Chrome Canary’s dev tools to get a manifest inspector.

So why hasn’t the entire internet done this already?

Discoverability is still fairly poor. We need to do a better job of promoting the existence and value of installable web apps. We need more sites/apps promoting their installability.

Some browsers are taking the lead – Opera is showing ambient notifications like a small mobile icon when the current site is installable.

Microsoft is looking at finding installable sites via Bing; and adding them straight to their app store.

You can also look at some other specs which make mobile web apps more powerful – access to the hardware, sensors, location etc. The things people like about apps can be done on the web.

Start by making your app installable, then update from there – make it work offline, add more powerful features.

It’s wise to be iterative. But the hardest thing is always to just start.