Angular › Progressive Web Apps (PWA) with Angular

What is a web app manifest file, and what does it control for a Progressive Web App?

Intermediate

Answer

The manifest.webmanifest file describes metadata about your app, such as its name, icons, theme color, and how it should appear when installed on a device's home screen, letting browsers know how to present your app as if it were a native application.

// manifest.webmanifest
{
  "name": "My Shopping App",
  "short_name": "Shop",
  "theme_color": "#1976d2",
  "icons": [{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }]
}

Real-world example A shopping app's manifest file defines a custom app icon and theme color, so when a user installs it on their phone's home screen, it looks and feels just like any other native app they might have installed.

Common follow-ups: What is the minimum set of properties a manifest file needs to make an app installable?;How would you test whether your manifest file is configured correctly?

Angular CLI & Project Structure;Build Environments & Deployment