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

Question

我的情况与其他正常的 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 }) }) }

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

通过状态isModalOpen，我可以在普通桌面浏览器中向用户显示自定义提示。 但是当我在移动浏览器上运行同样的事情时，这个 beforeinstallprompt 不会被解雇。 我试过

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 文件也在构建文件夹中创建，当我推送到 Azure 时，它​​就像魅力一样工作。

Answer 2

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

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

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

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

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