PWA：preventDefault 不適用於 beforeinstallprompt

Question

我正在 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>

Answer 1

根據Google Developers的這篇文章： https ： //developers.google.com/web/updates/2018/06/a2hs-updates ：

啟動Chrome 68 [...]無論是否在beforeinstallprompt事件上preventDefault() ，都會顯示迷你信息beforeinstallprompt

因此，目前開發人員無法在移動Chrome版本> 67上阻止頁面上的橫幅廣告（適用於桌面版和舊版移動版<68）。

這里有更多信息： https ： //developers.google.com/web/fundamentals/app-install-banners/ 。 就像聲明的那樣：

mini-infobar是Android上Chrome的臨時體驗

如果被用戶解雇，則在足夠的時間（~3個月）過后才會顯示。

我希望這有幫助。

Answer 2

很可能 Window 未定義，因為您的頁面正在服務器端呈現。

解決方案：在觸發事件之前進行檢查，或者通過在運行時運行腳本來確保您的代碼在客戶端運行。

如果您使用 React 或 Nextjs，請使用 useEffect 鈎子或 componentDidMount。

PWA：preventDefault 不適用於 beforeinstallprompt

問題描述

2 個解決方案

解決方案1
0 2019-02-11 17:38:09

解決方案2
0 2021-05-24 06:20:42

PWA：preventDefault 不適用於 beforeinstallprompt

問題描述

2 個解決方案

解決方案1 0 2019-02-11 17:38:09

解決方案2 0 2021-05-24 06:20:42

解決方案1
0 2019-02-11 17:38:09

解決方案2
0 2021-05-24 06:20:42