I want to use the add to homescreen function of pwa's.

I made a pwa of my app and for testing purposes Im using http-server to run it

When I run audits I get a score of 92. the only fail is "Does not redirect HTTP traffic to HTTPS". But passed audits include: "user can be prompted to Install the Web App" and "Site is served over HTTPS"

in chrome://flags/ I have 'bypass user engagement checks and app banners enabled'

For testing I'm listening to the beforeinstallprompt event, for now, I'm listening to the event in the ngoninit part of my homepage with:

window.addEventListener('beforeinstallprompt', e => {
    console.log('beforeinstallprompt Event fired');
});

but when I press "add to home screen" in dev tools, nothing is logged in the console.

How can I catch the beforeinstallprompt-event?

Any help is greatly appreciated!

I want to use the add to homescreen function of pwa's.

I made a pwa of my app and for testing purposes Im using http-server to run it https://www.npmjs.com/package/http-server

When I run audits I get a score of 92. the only fail is "Does not redirect HTTP traffic to HTTPS". But passed audits include: "user can be prompted to Install the Web App" and "Site is served over HTTPS"

in chrome://flags/ I have 'bypass user engagement checks and app banners enabled'

For testing I'm listening to the beforeinstallprompt event, for now, I'm listening to the event in the ngoninit part of my homepage with:

window.addEventListener('beforeinstallprompt', e => {
    console.log('beforeinstallprompt Event fired');
});

but when I press "add to home screen" in dev tools, nothing is logged in the console.

How can I catch the beforeinstallprompt-event?

Any help is greatly appreciated!

• javascript
• angular
• progressive-web-apps

2 Answers 2

For Angular following code works for me:

you can test with Google Chrome developer tools

app.component.ts

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button (click)="addToHomeScreen()" *ngIf="showButton">Add to Home Scree</button>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  deferredPrompt: any;
  showButton = false;

  @HostListener('window:beforeinstallprompt', ['$event'])
  onbeforeinstallprompt(e) {
    console.log(e);
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault();
    // Stash the event so it can be triggered later.
    this.deferredPrompt = e;
    this.showButton = true;
  }


  addToHomeScreen() {
    // hide our user interface that shows our A2HS button
    this.showButton = false;
    // 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');
        }
        this.deferredPrompt = null;
      });
  }
}

'onbeforeinstallprompt' event is still not follows web standards

Reference : Add to Home Screen | Google Developers

GitHub Gist link

You can check this blog post about How to Use the 'beforeinstallprompt' Event to Create a Custom PWA Add to Homescreen Experience.

This is the sample code:

var deferredPrompt;

window.addEventListener('beforeinstallprompt', function (e) {   
    // Prevent Chrome 67 and earlier from automatically showing the prompt   
   e.preventDefault();   
   // Stash the event so it can be triggered later. 
  deferredPrompt = e;
  showAddToHomeScreen();

});

  function showAddToHomeScreen() {

  var a2hsBtn = document.querySelector(".ad2hs-prompt");

  a2hsBtn.style.display = "block";

  a2hsBtn.addEventListener("click", addToHomeScreen);

}

  function addToHomeScreen() {  
  var a2hsBtn = document.querySelector(".ad2hs-prompt");  // hide our user 
  interface that shows our A2HS button

  a2hsBtn.style.display = 'none';  // Show the prompt

  deferredPrompt.prompt();  // Wait for the user to respond to the prompt

  deferredPrompt.userChoice
    .then(function(choiceResult){

  if (choiceResult.outcome === 'accepted') {
    console.log('User accepted the A2HS prompt');
  } else {
    console.log('User dismissed the A2HS prompt');
  }

  deferredPrompt = null;

});}

The first thing you should do is create a variable outside the scope of the beforeinstallprompt event handler. This way you can reference it later. This handler saves a reference to the beforeinstallprompt event object. You can use this later to trigger the add to homescreen prompt on demand.

Note: Unlike service workers and the web manifest file the add to homescreen prompt is not a web standard. This means browsers are and always have been able to dictate how and if the user is prompted to add a progressive web app to the homescreen.