PWA 应用程序 beforeInstallPrompt 未在移动浏览器中触发但可在普通桌面浏览器中运行

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 }) }) }

 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 }) }) }

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

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.

Answer 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/