Install Web Apps with Web App Manifest
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:
{
"lang": "en",
"dir": "ltr",
"name": "Super Racer 2000",
"description": "The ultimate futuristic racing game from the future!",
"short_name": "Racer2K",
"icons": [{
"src": "icon/lowres.webp",
"sizes": "64x64",
"type": "image/webp"
},{
"src": "icon/lowres.png",
"sizes": "64x64"
}, {
"src": "icon/hd_hi",
"sizes": "128x128"
}],
"scope": "/racer/",
"start_url": "/racer/start.html",
"display": "fullscreen",
"orientation": "landscape",
"theme_color": "aliceblue",
"background_color": "red"
}
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:
<html>
<head>
<link rel="manifest" href="manifest.webmanifest">
</head>
</html>
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:
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="CodebySide">
<meta name="theme-color" content="#303F9F">
<link rel="icon" sizes="192x192" href="./assets/images/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="./assets/images/touch/touch-icon-128x128.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Codebyside">
<link rel="apple-touch-icon" href="./assets/images/touch/touch-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" href="./assets/images/touch/touch-icon-180x180.png">
<meta name="apple-mobile-web-app-status-bar-style" content="#303F9F">
<!-- Tile icon for Win8 -->
<meta name="msapplication-TileImage" content="./assets/images/touch/touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<meta name="msapplication-navbutton-color" content="#303F9F">
Make sure the images are in their right directories, so that they could be found and used as installation icon.
https://youtu.be/FLC6TIKcQnk
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
