PWA app beforeInstallPrompt not firing in mobile browser but working in normal desktop browser

Question

My case is a bit weird from the rest of the normal PWA installation problems. I audited my code using LightHouse and it gave everything green though I am not able to see the option

"User Can Be Prompted To Install The Web App".

I have written some code in React for my custom prompt for PWA apps. and it goes like this

In App.js file in the componentDidMount method

componentDidMount(){

window.addEventListener('beforeinstallprompt',e =>{
  // For older browsers
  e.preventDefault();
  console.log("Install Prompt fired");

  this.installPrompt = e;
  // See if the app is already installed, in that case, do nothing
  if((window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || window.navigator.standalone === true){
    return false;
  }
  // Set the state variable to make button visible
  this.setState({
    isModalOpen:true
  })
})

}

With the state isModalOpen I am able to show the custom prompt to the user in normal desktop browser. But when I run the same thing over mobile browser, this beforeinstallprompt is not getting fired. I tried in

Safari Browser in iOS Chrome Browser in iOS

Chrome Browser in Android

Can anyone guide me as to what I may be missing. Or if anyone has encountered such issues

Answer 1

first, Chrome, Edge, FireFox on iOS are all pseudo browsers, not real ones. They just use a webview so you can sync passwords and favorites. Safari is the only browser allowed on iOS.

beforeInstallPrompt is not supported on iOS, you have to manually prompt.

For Chrome on Android you can remotely debug using a USB cable. This might tell you what is holding you back.

Possibly not referencing the service worker or manifest correctly seems to be a very common issue when deploying to a server from localhost.

I have a library available that might help you out. https://love2dev.com/pwa/add-to-homescreen-library/