Web App Manifests are one of the key pieces to making your web app look and feel like a native app. Learn more
While everything is optional, once certain criteria is met, some browsers will automatically display an install banner for your app

Name of your web app
This will be used when there is insufficient space to display the full name, such as the homescreen
The purpose of your web app
The primary language for the name, short name and description properties. For example, en or en-CA
Your homescreen shortcut will load this URL
The scope of your domain that this manifest applies to
Color used in the browser and system UI, to help make your app immersive
URL Sizes Type
Add another...
This is typically your <body> background color, used to set the background color until the stylesheets for your app are loaded.
URL Sizes Type
Add another...
Copy manifest.json

Copy <head>

Helpful notes
  • Browsers will automatically display an install banner for your web app when it meets certain criteria
  • You can append a parameter to your start URL to detect when your app is launched from homescreen, or you can use the display-mode CSS media query
  • For games, you can set fullscreen display and landscape orientation
  • If your app is under a subdirectory (such as this one), make sure you set start_url and scope to that directory, otherwise launching will default to /
  • Not all browsers implement the manifest yet, however the <meta> tags will help bridge that gap
  • You can even link to your native app as a related app and get the benefit of the install banner
  • To determine if the install prompt was successful, or defer it, use the beforeinstallprompt event
  • Make sure to add a Service Worker so that your app can work offline and even send notifications