React-js如何触发“ BeforeInstallPromptEvent”以启动“弹出”添加到主屏幕

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-js如何触发“ BeforeInstallPromptEvent”以启动“弹出”添加到主屏幕相关的知识,希望对你有一定的参考价值。

我目前正在开发基于React的应用,并且面临PWA主题。我想触发并显示何时需要允许您将PWA添加到主屏幕的弹出窗口。我最近读到我可以使用BeforeInstallPromptEvent触发它,但是需要遵循一些规则,例如:-该网络应用尚未安装-满足用户参与启发式的要求(当前,用户与域互动至少30秒)-通过HTTPS提供服务(服务工作者需要)-已使用获取事件处理程序注册了服务工作者]

现在我已经具备了所有这些先决条件,但是实际上我无法启动BeforeInstallPromptEvent,所以我从未查看过弹出窗口,有人可以帮助我吗?

下来,您可以找到我以何种方式拦截了此事件

感谢您的建议

window.addEventListener('beforeinstallprompt', function (e) {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault()
    // Stash the event so it can be triggered later.
    deferredPrompt = e

    showAddToHomeScreen()
})

function showAddToHomeScreen() {

    var a2hsBtn = document.querySelector(".ad2hs-prompt");

    // @ts-ignore
    a2hsBtn.style.display = "block";

    // @ts-ignore
    a2hsBtn.addEventListener("click", addToHomeScreen);

}

function addToHomeScreen() {  var a2hsBtn = document.querySelector(".ad2hs-prompt");  // hide our user interface that shows our A2HS button
    // @ts-ignore
    a2hsBtn.style.display = 'none';  // Show the prompt
    deferredPrompt.prompt();  // Wait for the user to respond to the prompt
    deferredPrompt.userChoice
    // @ts-ignore
        .then(function(choiceResult){

            if (choiceResult.outcome === 'accepted') {
                console.log('User accepted the A2HS prompt');
            } else {
                console.log('User dismissed the A2HS prompt');
            }

            deferredPrompt = null;

        });}

答案

嗨]您是否检查了该事件的平台/浏览器兼容性?compatibility

您可以在此页底部找到它:https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent

仅在我的设备(android)上的Chrome中触发。在iPhone上不起作用。

当浏览器准备显示默认PWA提示或您可以显示自定义提示时,将触发该事件。我认为这是兼容性问题。

希望,它将对您有帮助

以上是关于React-js如何触发“ BeforeInstallPromptEvent”以启动“弹出”添加到主屏幕的主要内容,如果未能解决你的问题,请参考以下文章

react-js中如何从组件中取出props数据?

如何使用react-js以动态形式将复选框值与文本输入绑定?

未找到模块:错误:无法解析 React-js?

javascript REACT-JS

Node-SASS 源映射不适用于 React-JS

无法使用 fontawesome 的 react-js 库显示图标