Home Screen Installation

Web applications can provide the manifest.json file, standarized as the Web Manifest, specifying the features and behaviors needed on order to treat the application as a first-class citizen on the mobile platform, i.e. adding ("installing") to the home screen with the relevant icon, full screen behaviors, themes, standalone appearance without browser bar etc. It can also serve as a centralized place to put all the metadata associated with the Web application.

Having the Web Manifest is one of the key factors (apart from being served via HTTPS and providing a Service Worker-based offline behavior) for the Web applications to be treated as a Progressive Web App. Such applications get non-obtrusive "add to home screen" banners in most Android browsers.

Browser-assisted adding to the home screen is also possible on iOS using non-standard Apple meta tags describing icons and allowing to run without the Safari UI (standalone mode).

API glimpse

Manifest Elements

{
  "short_name": "Example App",
  "name": "The Example Application",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96"
    }
  ],
  "theme_color": "#ff0000",
  "background_color": "#ff0000",
  "start_url": "index.html",
  "display": "standalone"
}

See also this website's own manifest.json.

Install Banner API

window.addEventListener('beforeinstallprompt')
An event fired when the browser's heuristic decides to display the "add to home screen" banner to the user. Allows tracking the user's decision and presenting the banner from the custom UI.
event.prompt()
Triggers displaying the "add to home screen" banner from the custom UI.
event.userChoice
Returns Promise resolved with the outcome of the "add to home screen" banner – either accepted or dismissed.
window.addEventListener('appinstalled')
An event fired when the Web application has been successfully added to the user's home screen.

Resources