Web App Manifest and Install Prompt

The web app manifest declares how your app appears when installed on a device.

Generated Manifest

// public/manifest.webmanifest
{
  "name": "My Angular App",
  "short_name": "MyApp",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Manifest Properties

Display Modes

Browsers offer an install prompt when the manifest and service worker checks pass.

Install Prompt Requirements

1. Manifest — Valid web app manifest with name, icons, start_url
2. Service Worker — Registered and active
3. HTTPS — Served over HTTPS (except localhost)
4. Engagement — User has interacted with the domain (Chrome heuristic)

Listening for the Install Prompt

@Component({
  selector: 'app-root',
  template: `
    <button *ngIf="showInstallButton" (click)="install()">
      Install App
    </button>
  `,
})
export class AppComponent {
  private deferredPrompt: any;
  showInstallButton = false;

  @HostListener('window:beforeinstallprompt', ['$event'])
  onBeforeInstallPrompt(event: Event): void {
    event.preventDefault();
    this.deferredPrompt = event;
    this.showInstallButton = true;
  }

  install(): void {
    if (this.deferredPrompt) {
      this.deferredPrompt.prompt();
      this.deferredPrompt.userChoice.then((choice: any) => {
        if (choice.outcome === 'accepted') {
          console.log('User installed the app');
        }
        this.deferredPrompt = null;
        this.showInstallButton = false;
      });
    }
  }
}

Maskable Icons

Maskable icons ensure the launcher does not crop your logo on Android devices:

{
  "src": "assets/icons/maskable-512x512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

The purpose: "maskable" property tells the browser to use the full icon area, with a safe zone in the center.

Generating Icons

# Use Angular CLI to generate icons from a source image
ng generate @angular/pwa:icons --source=logo.png

Or use online tools like:

• https://maskable.app
• https://realfavicongenerator.net