The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when ‘installed’ on the user’s mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.
A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.
By adding PWA schematic of Angular, we've had an automatically generated manifest.webmanifest file at src/manifest.webmanifest. We need to change automatically generated fields in this file, as well as icons and more.
short_name is the name of your PWA, when it's added to users' home screen.
name is used on automatically triggered A2HS popups on Android systems.
Please read WAMF specs on Web App Manifest on Google Developers Portal and update your manifest.webmanifest file as you wish.
One of the improvement points that I see on the manifest.webmanifest file, which was generated by @angular/pwa schematic, is the addition of description field. Description field is documented on both W3C Web App Manifest spec and MDN.
{
"description": "This is a dummy Angular app which demonstrates a PWA's behaviour on different platforms."
}
Providing a name, description and an app icon that is at least 512 x 512 pixels will help your app to be automatically indexed and packaged on Microsoft Store.
It is a good practice to add a query string to the end of the start_url field in manifest.webmanifest file to track how often your installed app is launched from users' home screen.
{
"start_url": "./?utm_source=home_screen"
}
Change the theme_color field in manifest.webmanifest file to #387ef5.
Update the value of the meta named theme-color in your index.html to #387ef5.
Now you can continue to Step 3 -> Customize app icons and splash screens.