javascript - React-js 如何触发 'BeforeInstallPromptEvent' 启动 "pop up"添加到主屏幕

Question

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

现在我已经具备所有这些先决条件，但实际上我无法启动 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;

        });}

Answer 1

您好)您检查过事件的平台/浏览器兼容性吗？

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

它仅在我设备 (Android) 上的 Chrome 中触发。它不适用于 iPhone。

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

希望对你有帮助