New in Chrome M31 Beta you can set up your web app to have an application shortcut icon added to a device’s homescreen, and have the app launch in full-screen “app mode” using Chrome for Android’s “Add to homescreen” menu item.

When a user clicks “Add to homescreen” they will see the app being added on the homescreen.

how to Add to Homescreen button on HTML5 Framework android Apps 11
homescreen Preview

add to homescreen  on apps

Chrome will look for the following meta tag in the  element of the web-page:

how to Add to Homescreen button on HTML5 Framework android Apps 12



The name attribute MUST be “mobile-web-app-capable” and the content attribute must be “yes” (case in-sensitive). If there is any other value in the content attribute the web app will be added as a regular bookmark.

The icon that is used to install to the homescreen is determined by using the largest icon found in one of the following tags:

how to Add to Homescreen button on HTML5 Framework android Apps 13

Configuration

The following example is the minimum required configuration to support a homescreen launch experience.

how to Add to Homescreen button on HTML5 Framework android Apps 14
phonegap project Index code adding for icon

In Android Studio on  [project] open assets folder past code in index.html file : 

how to Add to Homescreen button on HTML5 Framework android Apps 15



As an Amazon Associate I earn from qualifying purchases.