Add to Home Screen, sometimes referred to as the web app install prompt, makes it easy for users to install your Progressive Web App on their mobile or desktop device. After the user accepts the prompt, your PWA will be added to their launcher, and it will run like any other installed app.

Chrome handles most of the heavy lifting for you:

• On mobile, Chrome will generate a WebAPK, creating an even more integrated experience for your users.
• On desktop, your app will installed, and run in an app window.

In order for a user to be able to install your Progressive Web App, it needs to meet the following criteria

Show the Add to Home Screen dialog

In order to show the Add to Home Screen dialog, you need to:

1. Listen for the beforeinstallprompt event
2. Notify the user your app can be installed with a button or other element that will generate a user gesture event.
3. Show the prompt by calling prompt() on the saved beforeinstallprompt event

Listen for beforeinstallprompt

NgxPwaInstall handles beforeinstallprompt on startup and allows to display install panel at any place

To setup NgxPwaInstallinstall it with

  npm install ngx-pwa-install
      

  @Module({
    ...
    import: [
      ...
      NgxPwaInstall.forRoot()
    ]
  })
  export class AppModule {}
  

Later you can wrap pwa install panes with <ngx-pwa-install #pwa></ngx-pwa-install>

  <ngx-pwa-install #pwa (prompt)="showPanel=true">
    <div class="pwa-install-panel" [@pwaPanelAnimation]="showPanel">
      <mat-card>
        You can install this application to your device
        <button mat-raised-button
            color="primary"
            (click)="pwa.install()">
            INSTALL
        </button>
      </mat-card>
    </div>
  </ngx-pwa-install>
  

You just need to call pwa.install() when user ready to install

This will call prompt on the saved event. It will show a modal dialog, asking the user to to add your app to their home screen.

Output (prompt) will be fired when beforeinstallpromopt event happened. This can be useful for animations