Home Screen Installation
Web applications can provide the manifest.json file, standardized as the Web Manifest, specifying the features and behaviors needed in order to treat the application as a first-class citizen on the target 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 – see Offline Mode) for the Web applications to be treated as a Progressive Web App (PWA). Such applications get "add to home screen" UX in most desktop and Android browsers, i.e. the icon in the address bar.
Google Chrome additionally presents an additional on-screen banner prompting user to install the app based on usage heuristic. The banner might be cancelled or replaced with custom installation UX using beforeinstallprompt event.
When the application is added to the home screen, its icon might additionally present a badge (notification dot or number) using Badging API, as of Spring 2020 available in Google Chrome only.
Browser-assisted adding to the home screen also used to be 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
Promiseresolved with the outcome of the "add to home screen" banner – eitheracceptedordismissed. window.addEventListener('appinstalled')- An event fired when the Web application has been successfully added to the user's home screen.
Badging API
navigator.setAppBadge([number])- Sets the badge (dot) on the installed app's icon on the home screen, with the optional
numberin case the underlying platform allows it. navigator.clearAppBadge()- Clears the previously set badge from the installed app's icon.