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.
