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

Question

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

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

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

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

在chrome中，beforeinstallprompt事件触发时将显示该事件，并单击“安装”后，我将调用，deferredPrompt.prompt()以显示本机应用程序安装对话框。

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

预期结果：

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

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

有什么方法可以禁用谷歌浏览器的迷你信息栏吗？