javascript - PWA : preventDefault not working with beforeinstallprompt

标签 javascript progressive-web-apps

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

最佳答案

根据 Google Developers 的这篇文章:https://developers.google.com/web/updates/2018/06/a2hs-updates :

Starting Chrome 68 [...] the mini-infobar is shown regardless of if preventDefault() was called on the beforeinstallprompt event

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

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

The mini-infobar is an interim experience for Chrome on Android

If dismissed by a user, it will not be shown until a sufficient period of time (~3 months) has passed.

希望对您有所帮助。

关于javascript - PWA : preventDefault not working with beforeinstallprompt,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53134483/

相关文章:

javascript - 使用 k6 进行 Meteor 应用程序负载测试,等待 body 元素

javascript - 在尝试再次执行之前等待函数完成执行的问题

javascript - 内网如何使用nodejs

javascript - 审计 Web 应用程序的前端性能

google-chrome - 是否可以设置 Chrome 显示的通知样式?

javascript - 如何从 stackoverflow 等网站运行 javascript 示例?

javascript - 渐进式 Web 应用程序 "does not work offline"错误

ssl-certificate - PWA 需要什么样的 SSL 证书?

json - 从 list 下载的图标为空或已损坏

vue.js - 使用 nuxt/pwa 进行离线通知