3

与其他正常的 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 浏览器

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

4

2 回答 2

1

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

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

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

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

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

于 2020-01-30T02:09:43.217 回答
0

我解决了这个问题。这里的解决方案：在公共文件夹中创建了一个 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 时，它​​就像魅力一样工作。

于 2020-02-03T04:11:03.163 回答