3

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

user1295308
  • 425
  • 7
  • 20

2 Answers2

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/

Chris Love
  • 3,740
  • 1
  • 19
  • 16
  • 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 https://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 – user1295308 Jan 30 '20 at 03:53
  • 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' – Chris Love Jan 31 '20 at 02:21
  • 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 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. – user1295308 Feb 03 '20 at 04:08
  • that is basically what I was suggesting :) – Chris Love Feb 03 '20 at 21:28
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.

user1295308
  • 425
  • 7
  • 20