时间戳

首页 > 解决方案 > PWA 应用 beforeInstallPrompt 不在移动浏览器中触发，但在普通桌面浏览器中工作

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

问题描述

与其他正常的 PWA 安装问题相比，我的情况有点奇怪。我使用 LightHouse 审核了我的代码，尽管我看不到该选项，但它给了一切绿色

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

我在 React 中为我的 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
  })
})

}

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

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

Android 中的 Chrome 浏览器

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

标签： reactjstriggersprogressive-web-appsbeforeinstallprompt

解决方案

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

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

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

从 localhost 部署到服务器时，可能没有正确引用服务工作者或清单似乎是一个非常常见的问题。

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

推荐阅读