reactjs - PWA 应用 beforeInstallPrompt 不在移动浏览器中触发，但在普通桌面浏览器中工作

Question

我的情况与其他正常 PWA 安装问题相比有点奇怪。我使用 LightHouse 审核了我的代码，虽然我看不到该选项，但它使所有内容都变成了绿色

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

我已经在 React 中为 PWA 应用程序的自定义提示编写了一些代码。它是这样的

在 App.js 文件中的 componentDidMount 方法



<p>componentDidMount(){</p>

<pre><code>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
})
})
</code></pre>

<p>}</p>



在状态 isModalOpen 下，我可以在普通桌面浏览器中向用户显示自定义提示。但是当我在移动浏览器上运行同样的东西时，这个 beforeinstallprompt 并没有被触发。我试过了

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

Android 中的 Chrome 浏览器

任何人都可以指导我我可能缺少什么。或者有谁遇到过这样的问题

Answer 1

首先，iOS上的Chrome、Edge、FireFox都是伪浏览器，不是真浏览器。他们只使用 WebView ，因此您可以同步密码和收藏夹。 Safari 是 iOS 上唯一允许的浏览器。

iOS不支持beforeInstallPrompt，需要手动提示

对于 Android 上的 Chrome，您可以使用 USB 数据线进行远程调试。这可能会告诉您是什么阻碍了您。

从本地主机部署到服务器时，可能没有正确引用服务 worker 或 list 似乎是一个非常常见的问题。

我有一个图书馆可以帮助你。 https://love2dev.com/pwa/add-to-homescreen-library/