如何在Chrome Android中禁用应用程序安装迷你信息栏

Question

我已添加https://developers.google.com/web/fundamentals/app-install-banners/native指定的本机应用安装横幅。

我的要求是，所有浏览器上均应显示一个带有安装按钮的对话框，单击安装后，Chrome上应显示本机应用安装横幅，其他浏览器上应使用firebase动态链接。

我模仿了如图所示的由应用程序徽标，标题，描述和安装按钮组成的应用程序安装对话框。

在除chrome之外的所有浏览器上，都会立即显示此对话框，并且安装按钮链接到firebase动态链接，如果已安装，则打开应用程序，否则打开playstore来安装应用程序。

在chrome中，将触发deferredPrompt.prompt()事件并在单击“安装”时显示该信息，我会调用getInitialState() { const { userAgent } = this.props; const bDetails = new BrowserDetails(userAgent); return { deferredPrompt: null, showBanner: bDetails.isMobile() && bDetails.isAndroid() && !bDetails.isChrome(), isChrome: bDetails.isChrome(), }; } componentDidMount() { const { isChrome } = this.state; if (isChrome) { this.listenForInstallBanner(); } } onClickInstallApp() { const { deferredPrompt } = this.state; deferredPrompt.prompt(); deferredPrompt.userChoice.then((choice) => { if (choice.outcome === 'accepted') { this.closeDialog(); } }); } listenForInstallBanner = () => { window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); this.setState({ deferredPrompt: e, showBanner: true, }); }); }; closeDialog() { this.setState({ showBanner: false, deferredPrompt: null }); } render() { const { showBanner, isChrome } = this.state; return showBanner && ( <div className="root"> <div className="banner-body"> <div className="icon-container"> <img className="icon" src={ffLogo} alt="FareFirst Logo" /> </div> <div className="text-container"> <h5 className="title">FareFirst</h5> <p className="desc"> Install the app to enjoy offers and more.</p> </div> <div className="bt-container"> {/* eslint-disable-next-line react/no-danger */} <button type="button" className="close btn-close" aria-label="Close" onClick={this.closeDialog} dangerouslySetInnerHTML={{ __html: closeSvg }} /> {isChrome && <button type="button" className="btn btn-secondary bt-install" onClick={this.onClickInstallApp}>Install</button>} { /* eslint-disable-next-line react/no-danger */ !isChrome && <a className="btn btn-secondary bt-install" href="https://farefirst.page.link/pwa_install"> Install </a> } </div> </div> <style jsx>{styles}</style> </div> ); } 来显示本机应用程序安装对话框。

所有这些工作正常，但是chrome第一次显示横幅上方的迷你信息栏，如下所示。一旦我们关闭了迷你信息栏，它将在下次继续正常运行。 （因为chrome在文档中提到的未来三个月不会显示迷你信息栏）

预期结果：

我的用于显示安装横幅的Next.js代码如下。

{{1}}

有什么方法可以禁用谷歌浏览器的迷你信息栏吗？如果没有的话，还有其他替代方法吗？