Android-Specific JSON Manifest

Contact Us or call 1-877-932-8228
Android-Specific JSON Manifest

Android-Specific JSON Manifest

Since Chrome version M31, the mobile browser running on Android devices, Google has offered a way to set up a web app to have an application shortcut icon for adding to the device's home screen; when clicked, the home screen icon will launch the web application in full-screen "app mode". Since Chrome version M39, Google offers a way - via a JSON manifest - to specify metadata for the application, allowing us as developers a way to more closely mimic a native-application experience with our web app. You can find more details at https://developer.chrome.com/multidevice/android/installtohomescreen.

Home screen-installed web apps work just like a "normal" web app but integrate into the Android environment in the following extra ways:

  1. Installs Directly to Home Screen: users clicking "Add to homescreen" will see the app being added on to the home screen.
  2. Integrates Into OS Task-Switcher: launching a web app from the home screen means the app will appear in the task switcher, separately from the browser.
  3. Runs in Full Screen: Web apps run in full screen more, with no vestiges of a browser; the URL does not appear, nor browser elements like bookmarking and navigation controls.
  4. Supports a Default Device Orientation: Web apps launch and remain in the designation orientation (landscape or portrait).
  5. Navigating to External Pages Highlights Them to User: Users will always know if the web app routes them to a location outside the application's domain - especially useful for authentication flows, as the user is kept in the app experience but the URL of the authentication system is clearly visible to the user.

The JavaScript manifest, in JSON format, allows us to define things like a set of icons (various icons, for differing size and screen densities), a default orientation, a title, and landing page for our web app. To link to the manifest, simply include a link tag in the head of the web page, like this:

<link rel="manifest" href="manifest.json">

A typical manifest file might look like this:

{
	"name": "Sample Webucator Android Web App",
	"icons": [
		{
			"src": "launcher-icon-0-75x.png",
			"sizes": "36x36",
			"type": "image/png",
			"density": "0.75"
		},
		{
			"src": "launcher-icon-1x.png",
			"sizes": "48x48",
			"type": "image/png",
			"density": "1.0"
		},
		{
			"src": "launcher-icon-1-5x.png",
			"sizes": "72x72",
			"type": "image/png",
			"density": "1.5"
		},
		{
			"src": "launcher-icon-2x.png",
			"sizes": "96x96",
			"type": "image/png",
			"density": "2.0"
		},
		{
			"src": "launcher-icon-3x.png",
			"sizes": "144x144",
			"type": "image/png",
			"density": "3.0"
		},
		{
			"src": "launcher-icon-4x.png",
			"sizes": "192x192",
			"type": "image/png",
			"density": "4.0"
		}
	],
	"start_url": "index.html",
	"display": "standalone",
	"orientation": "portrait"
}

Our sample manifest includes references to various PNG icons - in assorted sizes and pertaining to specific screen densities - as well as a starting URL, display mode ("standalone"), and orientation ("portrait").

For mobile versions of Chrome on Android older than M39 but since M31, Chrome supports the following meta tag for home screen-installed apps:

<meta name="mobile-web-app-capable" content="yes">
Next