38
Views
0
Comments
PWA Custom Install Banner Android
Application Type
Mobile, Reactive
Service Studio Version
11.54.50 (Build 63188)
Platform Version
11.19.0 (Build 38072)

Hi Outsystems Support.


My issue is im developing a PWA apps, and want to make a custom install banner for android like this for the example.

 

I want when i clicked the button it will show the install prompt like this.


The prompt can show many time if i no refresh the page, but if i refresh the page the event beforeinstallprompt not fired again. or i close or open new tab the event will not fired again so i cannot show the install prompt.


And im using this javascript in onReady screen.

let deferredPrompt; // Allows to show the install promptconst installButton = document.getElementById($parameters.button); console.log("start");window.addEventListener("beforeinstallprompt", function (e) {  console.log("beforeinstallprompt fired");  console.log(e);  // Prevent Chrome 76 and earlier from automatically showing a prompt  e.preventDefault();  // Stash the event so it can be triggered later.  deferredPrompt = e;  // Show the install button//  installButton.hidden = false;  installButton.addEventListener("click", installApp);});function installApp() {  // Show the prompt  console.log("install");  alert("click");  deferredPrompt.prompt();//  installButton.disabled = true;  // Wait for the user to respond to the prompt  deferredPrompt.userChoice.then(function(choiceResult) {    if (choiceResult.outcome === "accepted") {      console.log("PWA setup accepted");//      installButton.hidden = true;    } else {      console.log("PWA setup rejected");    }//    installButton.disabled = false;    deferredPrompt = null;  });}window.addEventListener("appinstalled", function(evt) {  console.log("appinstalled fired", evt);});


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.