A Home Screen Icon for the Jazz Calendar Site: Android

Contact Us or call 1-877-932-8228
A Home Screen Icon for the Jazz Calendar Site: Android

A Home Screen Icon for the Jazz Calendar Site: Android

Open HomeScreenIcons/Demos/android/index.html and HomeScreenIcons/Demos/android/manifest.json in a file editor and, if possible, open HomeScreenIcons/Demos/android/index.html from an Android device or emulator.

Code Sample:

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

Code Explanation

Our index.html files has a link tag in the head section, pointing to the manifest.json file.

When opened in Chrome on an Android device (in our case, in the screenshots below, on an Android tablet device), the page allows users to tap "Add to homescreen" and, because we have coded our page with the manifest.json file and added the appropriate icons, we get a tappable home screen icon. When opened via the homepage "music note" icon, the page opens as a web app, in full-screen mode with our specified orientation. The screenshot below shows the home screen (with icon) on the left and the full-screen page on the right:Home Screen and Full Screen Page

We reference the various sizes of our icon in the manifest file and specify a title, starting URL, display, and orientation.

In the next exercise, you'll add home screen icons to the Pickup Soccer site, for both iOS and Android devices.

Next