![](/img/trans.png)
[英]PWA beforeinstallprompt Uncaught (in promise) DOMException
[英]PWA: preventDefault not working with beforeinstallprompt
我正在 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 :
启动Chrome 68 [...]无论是否在
beforeinstallprompt
事件上preventDefault()
,都会显示迷你信息beforeinstallprompt
因此,目前开发人员无法在移动Chrome版本> 67上阻止页面上的横幅广告(适用于桌面版和旧版移动版<68)。
这里有更多信息: https : //developers.google.com/web/fundamentals/app-install-banners/ 。 就像声明的那样:
mini-infobar是Android上Chrome的临时体验
如果被用户解雇,则在足够的时间(~3个月)过后才会显示。
我希望这有帮助。
很可能 Window 未定义,因为您的页面正在服务器端呈现。
解决方案:在触发事件之前进行检查,或者通过在运行时运行脚本来确保您的代码在客户端运行。
如果您使用 React 或 Nextjs,请使用 useEffect 钩子或 componentDidMount。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.