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

Chris Love · Accepted Answer · 2020-01-30 02:09:43Z

2

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/

answered Jan 30, 2020 at 2:09

Chris Love

3,9031 gold badge22 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1295308 Over a year ago

Thanks for your reply. I tried to debug a bit and found out the root cause for my issue. Actually I was trying to test this on localhost though, but the main goal was to push it to the azure server. When I pushed to the azure, and publish the website, I found this error XXX.azurewebsites.net/manifest.json 404 (Not Found) . Somehow it is not taking the manifest file. And when I run the lighthouse, it's saying the same thing. Any idea as to why this might happen

Chris Love Over a year ago

Azure websites are a jacked up mess.... You will most likely need to explicitly enable the manifest file to be served by the website. I can't recall how to configure that, I knew how to do it in IIS back in the old days when you had an actual server LOL. You will also need to add the application/json mime type to that file so it is served correctly. But IIS and now Azure websites block any file extension that are not 'common'

user1295308 Over a year ago

Thanks for your reply. I have solved the issue by adding the application/json mime type. The solution here it goes: Created a web.config file in the public folder and added the following lines <code> <?xml version="1.0"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" /> </staticContent> </system.webServer> </configuration> </code> 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.

Chris Love Over a year ago

that is basically what I was suggesting :)

user1295308 · Accepted Answer · 2020-02-03 04:11:03Z

0

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.

answered Feb 3, 2020 at 4:11

user1295308

4552 gold badges9 silver badges21 bronze badges

2 Comments

Toni Gallardo Over a year ago

Hi, I'm having the same problem and this web.config doesn't works for me. Anyone have other solution? Thanks!

Hamid Mayeli Over a year ago

I get The page cannot be displayed because an internal server error has occurred. by applying this change!!

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related