Add to Homescreen

Overview

Allowing sites to be added to the home screen is an important feature provided by PWA. When the user accesses the page in the browser, the browser pops up a app install banner at a suitable time. After the user agrees, the site where the current page resides is added to the user's home screen and a icon is generated.

a2hs

The basic requirements

  • Site is served over HTTPS
  • Has a web app manifest file
  • Has a service worker registered on your site
  • Meets a site engagement heuristic

When the banner appears

Chrome automatically displays 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 192x192 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).
  • Meets a site engagement heuristic defined by Chrome (this is regularly being changed).

The criteria that UC Browser displays the banner is almost the same as Chrome, except for the site engagement heuristic, which is defined by UC Browser and is regularly changed.

Web App Manifest

Create the manifest, an example from Aliexpress:

{
  "name": "AliExpress",
  "short_name": "AliExpress",
  "icons": [{
    "src": "/img/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "start_url": "/?from=homescreen",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#000",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507",
  "prefer_related_applications": false,
  "related_applications": [{
    "platform": "play",
    "id": "com.alibaba.aliexpresshd"
  }]
}

description of name & short_name

name

Provides a human-readable name for the application as it is intended to be displayed to the user, for example among a list of other applications or as a label for an icon.

short_name

Provides a short human-readable name for the application. This is intended for use where there is insufficient space to display the full name of the web application.

Click and get more descriptions of members in manifest

Deploy the manifest in your HTML pages using a link tag in the head of your document, as follow:

<html>
  <head>
  	...
  	<link rel="manifest" href="manifest.json">
  </head>
  <body>
  	...
  </body>
</html>

Reading more: