Skip to content

Install Web Apps with Web App Manifest

Posted in News

Web apps are web apps. Hybrid apps are what they are, so is native apps. As a developer, those terms are likely familiar with you.

However, as developers, we are tempted to cheat a bit – kinda! The ability to let your app appear like a Web App on mobile is awesome, and even more awesome is when the way to achieve this effect is simple and straightforward.

What exactly is the “Manifest for Web Applications”:

“The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the mobile home screen), direct what the user can launch and, more importantly, how they can launch it.

In the future the manifest will give you even more control over your app, but right now we are just focusing on how your app can be launched”

I recently did a similar ‘effect’ for my CodeBySide app, and I was happy to see the results so nice on Mobile!

The How To

A manifest (not the flight one), is all that you need to get going. You create a manifest file, then link to it from your index html file, or your homepage file. Let’s do it.

Before then, let us look at what a typical Manifest can look like:

It is a JSON format, and as usual, easy to make sense following the key value pairs. Nonetheless, you might be wondering what the scope and start_url mean. Well, the scope refers to “the set of URLs to which an application context can be navigated while the manifest is applied.”

So assuming you had a url of khophi.co/blog and khophi.co/codebyside, applying the scope of "scope": "/codebyside/" will mean the manifest allows only navigation in and after the /codebyside/ URL, and as such, /blog/ won’t be accessed when the manifest is applied.

With your manifest ready (you can call it manifest.json), you simply included it in your header part of your index file:

Just ready to install

We’re just about to go, but need to set our icon to use when the user installs our page onto their homescreen. Of course, the icon needs to be clean and sweet.

Here’s what I am using for CodeBySide:

Make sure the images are in their right directories, so that they could be found and used as installation icon.

More info:

To read more on this subject, visit:

  • https://developer.chrome.com/multidevice/android/installtohomescreen
  • https://w3c.github.io/manifest/
  • https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android?hl=en