PWA：preventDefault 不适用于 beforeinstallprompt答案

【问题标题】：PWA: preventDefault not working with beforeinstallpromptPWA：preventDefault 不适用于 beforeinstallprompt
【发布时间】：2019-04-07 15:17:51
【问题描述】：

我正在 Android 设备上的 Chrome 70 上进行测试，这应该可以很好地防止显示 AddToHomescreen 提示。我无法阻止提示或捕获以供以后使用。每次页面加载时都会继续显示提示。

文本框已填充并显示 beforeinstallprompt 事件正在加载。事件处理程序上的 preventDefault 不会阻止提示。

为什么？？？？？？

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="#eaa103">
    <link rel="manifest" href="/pwa/manifest.json" />
    <title>Some App</title>
    <link rel="stylesheet" href="/pwa/css/bootstrap.min.css" />
    </head>
    <body>

    <div class="container">
        <testbox></testbox>
    </div>

    <script src="/pwa/js/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

    </script>

    <script>
    var deferredPrompt;
    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;
        $("testbox").html("beforeinstallprompt loaded");
        return false;
    }); 
    </script>

    </body>
    </html>

【问题讨论】：

您找到解决方案了吗？我有同样的问题。

标签： javascript progressive-web-apps

【解决方案1】：

很可能 Window 未定义，因为您的页面正在服务器端呈现。

解决方案：在触发事件之前进行检查，或者通过在运行时运行脚本来确保您的代码在客户端运行。

如果您使用 React 或 Nextjs，请使用 useEffect 挂钩或 componentDidMount。

【讨论】：

【解决方案2】：

根据谷歌开发者的这篇文章：https://developers.google.com/web/updates/2018/06/a2hs-updates：

启动 Chrome 68 [...] 无论是否在 beforeinstallprompt 事件中调用了 preventDefault()，都会显示迷你信息栏

因此，开发人员目前无法在移动 Chrome 版本 > 67 上阻止页面上的横幅（它适用于桌面和旧版本

这里有更多信息：https://developers.google.com/web/fundamentals/app-install-banners/。如前所述：

迷你信息栏是 Android 上 Chrome 的临时体验

如果被用户关闭，则在足够长的时间（约 3 个月）过去后才会显示。

我希望这会有所帮助。

【讨论】：