PWA add to homescreen notification does not show- Android

@jefredallan wrote:

I followed this tutorial for PWA:https://alligator.io/ionic/pwas/. Which works. But now I want to notify the user to add it to homescreen when the page loads instead of clicking the 3 dots on top then Click Add to Homescreen.

I tried this tutorial: https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4 but no luck. I also found that I do not have manifest.json in src after I runned npm install @angular/pwa.

My code was:

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  deferredPrompt;
  constructor(public navCtrl: NavController) {}



  ionViewWillEnter() {
    window.addEventListener('beforeinstallprompt', (e) => {
      console.log('beforeinstallprompt Event fired');
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      this.deferredPrompt = e;
    });
  }

  showInstallBanner() {
    if (this.deferredPrompt !== undefined && this.deferredPrompt !== null) {
      // Show the prompt
      this.deferredPrompt.prompt();
      // Wait for the user to respond to the prompt
      this.deferredPrompt.userChoice
      .then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        // We no longer need the prompt.  Clear it up.
        this.deferredPrompt = null;
      });
    }
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
  <button  (click)="showInstallBanner()" >Install</button>

</ion-content>

Please Help, Needed to learn this for my final year project.

Posts: 1

Participants: 1

Read full topic