Once you have the manifest created and and on your site, all you need to do is add a link tag to all the pages that encompass your web app as follows.

Since Chrome 31, 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.

New in Chrome 39, you can define the metadata associated with your web application in a JSON-based manifest. The manifest provides a way to wrap metadata about a web application into a single file. Using this metadata in conjunction with Add to Homescreen, you can create launch experiences more comparable to native applications.

Chrome will automatically display the banner when your app meets the following criteria:

Has a web app manifest file with:

a short_name (used on the home screen)

a name (used in the banner)

a 144x144 png icon (the icon declarations must include a mime type of image/png)

a start_url that loads

Has a service worker registered on your site.

Is served over HTTPS (a requirement for using Service Worker).

Is visited at least twice, with at least five minutes between visits.

Native App install banners are similar to Web app install banners, but instead of adding to the home screen will let the user install your native app without leaving your site.

Native app install banner flow

Criteria to Show the Banner

The criteria is similar to the Web App install banner except for the need of a service worker. Your site must:

Have a web app manifest file with:

a short_name

a name (used in the banner prompt)

a 144x144 png icon, your icon declaration’s should include a mime type of image/png

a related_applications object with information about the app

Be served over HTTPS

Be visited by the user twice, over two separate days during the course of two weeks.

If the headers include an entry of the form LINK <URI>; rel="manifest" (see [rfc5988]) then issue an HTTP GET URI request.

If that response is successful, the algorithm stops by returning the response message body to the caller as the PWP manifest.

If the HTML content includes a <link rel="manifest" href="URI"> in the header:

Issue a HTTP GET URI request

If the response is successful, the algorithm stops by returning the response message body to the caller as the PWP manifest.

PWACompat is a library that brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps. If you've created a manifest.webmanifest but want to have wide support everywhere else—through legacy HTML tags for icons and theming—look no further 👍