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.
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: