PWA 应用 beforeInstallPrompt 不在移动浏览器中触发，但在普通桌面浏览器中工作
PWA app beforeInstallPrompt not firing in mobile browser but working in normal desktop browser
我的情况与其他正常 PWA 安装问题相比有点奇怪。我使用 LightHouse 审核了我的代码，虽然我看不到选项
，但它使所有内容都变成了绿色
"User Can Be Prompted To Install The Web App"。
我已经在 React 中为 PWA 应用程序的自定义提示编写了一些代码。它是这样的
在App.js文件中的componentDidMount方法
</p>
<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
})
})
}
状态 isModalOpen 我可以在普通桌面浏览器中向用户显示自定义提示。但是当我 运行 在移动浏览器上做同样的事情时，这个 beforeinstallprompt 没有被触发。我试过
iOS 中的 Safari 浏览器
Chrome iOS
中的浏览器
Chrome Android
中的浏览器
任何人都可以指导我我可能遗漏了什么。或者有谁遇到过这样的问题
首先，Chrome、iOS上的Edge、FireFox都是伪浏览器，不是真浏览器。他们只使用网络视图，因此您可以同步密码和收藏夹。 Safari 是 iOS.
上唯一允许使用的浏览器
iOS 不支持 beforeInstallPrompt，您必须手动提示。
对于 Android 上的 Chrome，您可以使用 USB 数据线进行远程调试。这可能会告诉您是什么阻碍了您。
从本地主机部署到服务器时，可能没有正确引用服务工作者或清单似乎是一个非常常见的问题。
我有一个图书馆可以帮助你。 https://love2dev.com/pwa/add-to-homescreen-library/
我已解决问题。这里的解决方案是：在 public 文件夹中创建一个 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 时，它运行得很好。
我的情况与其他正常 PWA 安装问题相比有点奇怪。我使用 LightHouse 审核了我的代码，虽然我看不到选项
，但它使所有内容都变成了绿色"User Can Be Prompted To Install The Web App"。
我已经在 React 中为 PWA 应用程序的自定义提示编写了一些代码。它是这样的
在App.js文件中的componentDidMount方法
</p>
<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
})
})
}
状态 isModalOpen 我可以在普通桌面浏览器中向用户显示自定义提示。但是当我 运行 在移动浏览器上做同样的事情时，这个 beforeinstallprompt 没有被触发。我试过
iOS 中的 Safari 浏览器 Chrome iOS
中的浏览器Chrome Android
中的浏览器任何人都可以指导我我可能遗漏了什么。或者有谁遇到过这样的问题
首先，Chrome、iOS上的Edge、FireFox都是伪浏览器，不是真浏览器。他们只使用网络视图，因此您可以同步密码和收藏夹。 Safari 是 iOS.
上唯一允许使用的浏览器iOS 不支持 beforeInstallPrompt，您必须手动提示。
对于 Android 上的 Chrome，您可以使用 USB 数据线进行远程调试。这可能会告诉您是什么阻碍了您。
从本地主机部署到服务器时，可能没有正确引用服务工作者或清单似乎是一个非常常见的问题。
我有一个图书馆可以帮助你。 https://love2dev.com/pwa/add-to-homescreen-library/
我已解决问题。这里的解决方案是：在 public 文件夹中创建一个 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 时，它运行得很好。