PWA应用程序beforeInstallPrompt不是在移动浏览器中工作，而是在普通桌面浏览器中工作。

Question

我的案例与其他正常的PWA安装问题相比有点奇怪。我使用LightHouse审核了我的代码，虽然我看不到选项，但它提供了所有的绿色。

“可以提示用户安装Web应用程序”。

我已经为我的PWA应用程序定制提示符编写了一些代码。就像这样

在App.js文件中的componentDidMount方法中

​

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

}

​

使用state isModalOpen，我可以在普通桌面浏览器中向用户显示自定义提示符。但是，当我在移动浏览器上运行相同的内容时，这个安装前提示符不会被解雇。我试过了

iOS中的Safari浏览器iOS中的Chrome浏览器

Android环境下的Chrome浏览器

有人能引导我知道我可能失去了什么吗。或者如果有人遇到过这样的问题

Answer 1

我解决了这个问题。这里的解决方案是:在公用文件夹中创建一个web.config文件，并添加以下行

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

当我构建我的应用程序时，这个web.config文件也是在build文件夹中创建的，当我推到Azure时，它就像魅力一样工作。

Answer 2

首先，Chrome、Edge、FireFox on iOS都是伪浏览器，而不是真正的浏览器。他们只是使用一个webview，这样你就可以同步密码和收藏夹了。Safari是iOS上唯一允许的浏览器。

beforeInstallPrompt在iOS上不受支持，您必须手动提示。

对于Android上的Chrome，您可以使用USB电缆进行远程调试。这也许能告诉你是什么阻碍了你。

在从本地主机部署到服务器时，可能没有正确引用服务工作人员或清单似乎是一个非常常见的问题。

我有个图书馆可以帮你解决问题。https://love2dev.com/pwa/add-to-homescreen-library/