reactjstriggersprogressive-web-appsbeforeinstallprompt

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

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

Solution

  • I got the issue resolved. The solution here it goes: Created a web.config file in the public folder and added the following lines 

    <?xml version="1.0"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" /> </staticContent> </system.webServer> </configuration>

    When I build my application,this web.config file is also created in the build folder and when I pushed to the Azure, it worked like charm.