PWA add to homescreen notification does not show- Android

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.

It only works if it is hosted on a https url. So that’s the first question.

Yes it was hosted on firebase.

What does lighthouse pwa audit tell you?

Well there it is: chapter installable

Fix these and then maybe you have more luck

By the way, the tuturial is great except for the name of the service worker as it comes out ofnthe box

See firebase.json key source

running npm install @angular/pwa was suppose to give me manifest.json but it did not. when i run ng add @angular/pwa, it says command not recognised

Whats does your package.json look like?

{
  "name": "bill_management",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/pwa": "^0.803.9",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "core-js": "^2.5.4",
    "firebase": "^7.2.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project"
}

THe tutorial worked fine for me out of the box, I just needed to change "source": "sw.js", into the actual name of the service worker

where do i find the name of the service worker?

In the www folder after build
or in the app.module.ts as configuration of the service worker module

that is my app module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { environment } from 'src/environments/environment';
import { AuthenticateService } from './services/authentication.service';
import { AngularFireAuthModule } from '@angular/fire/auth';

import * as firebase from 'firebase/app';
import { ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

firebase.initializeApp(environment.firebase);

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, AngularFireAuthModule, ReactiveFormsModule, HttpClientModule] ,
  providers: [
    StatusBar,
    SplashScreen,
    AuthenticateService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

no pwa there, so you did not install the package…
maybe retry…

Jef-MBP:bill_management jef$ sudo ng add @angular/pwa
sudo: ng: command not found
Jef-MBP:bill_management jef$ sudo  npm install @angular/pwa
npm WARN @angular/fire@5.2.1 requires a peer of firebase@>= 5.5.7 <7 but none is installed. You must install peer dependencies yourself.
npm WARN The package @angular/compiler is included as both a dev and production dependency.

+ @angular/pwa@0.803.9
updated 1 package and audited 17628 packages in 6.976s
found 0 vulnerabilities

Does it matter if i do npm install rather than ng add?

well you already are in a world of deep trouble running sudo on all commands…

so no clue what is running when and where…

Maybe you can try this: