Как отключить установку приложения Mini-infobar в Chrome Android - PullRequest
Новая
       42

Как отключить установку приложения Mini-infobar в Chrome Android

0 голосов
/ 21 января 2019

Я добавил баннер для установки собственного приложения, как указано https://developers.google.com/web/fundamentals/app-install-banners/native.

Мое требование заключается в том, чтобы во всех браузерах отображался диалог с кнопкой установки, а при нажатии на кнопку установки баннер для установки собственного приложения должен отображаться.в браузере Chrome и в других браузерах должна использоваться динамическая ссылка firebase.

Я имитировал диалог установки приложения, состоящий из логотипа приложения, заголовка, описания и кнопки установки, как показано.

App Install Banner

Во всех браузерах, кроме Chrome, это диалоговое окно будет отображаться мгновенно, а кнопка установки ссылается на динамическую ссылку Firebase, которая открывает приложение, если оно установлено, или открывает PlayStore для установки приложения..

В chrome оно будет отображаться при запуске события beforeinstallprompt и при нажатии кнопки установки я вызываю deferredPrompt.prompt(), чтобы отобразить диалоговое окно установки собственного приложения.

Все это работает нормально, но впервые chrome показывает мини-информационную панель над баннером, как показано ниже.Как только мы закроем мини-инфобар, он будет работать, как и ожидалось, в следующий раз.(Поскольку хром не будет отображать мини-инфобар в течение следующих 3 месяцев, как указано в документации)

Image showing mini-inforbar in chrome

Ожидаемый результат:

Expected result without the info minibar

Мой код 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>
    );
}

Есть ли способ отключить мини-браузер Google Chrome?инфобар или если нет то другой альтернативы?

...