PWA：preventDefault 不适用于 beforeinstallprompt
[英]PWA: preventDefault not working with beforeinstallprompt
问题描述
I am testing on Chrome 70 on an Android device which should perfectly well prevent the AddToHomescreen prompt from showing.
我正在 Android 设备上的 Chrome 70 上进行测试，这应该可以很好地防止 AddToHomescreen 提示显示。 I cannot prevent the prompt or capture for later use.我无法阻止提示或捕获以供以后使用。 The prompt continues to show on every page load.每次加载页面时都会继续显示提示。
The textbox is filled and shows that the beforeinstallprompt event is loading.文本框已填充并显示 beforeinstallprompt 事件正在加载。 preventDefault on the event handler is not preventing the prompt.事件处理程序上的 preventDefault 不会阻止提示。
Why??????为什么？？？？？？
<!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>
2 个解决方案
解决方案1
0 2019-02-11 17:38:09
According to this article from Google Developers: https://developers.google.com/web/updates/2018/06/a2hs-updates : 根据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 thebeforeinstallprompteventbeforeinstallprompt事件上preventDefault()，都会显示迷你信息beforeinstallprompt
So, there is currently no way for the developer to block the banner on the page on mobile Chrome version > 67 (it works on Desktop and on older mobile versions < 68). 因此，目前开发人员无法在移动Chrome版本> 67上阻止页面上的横幅广告（适用于桌面版和旧版移动版<68）。
There is a bit more info here: https://developers.google.com/web/fundamentals/app-install-banners/ . 这里有更多信息： https ： //developers.google.com/web/fundamentals/app-install-banners/ 。 As stated: 就像声明的那样：
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.
I hope this helps. 我希望这有帮助。
解决方案2
0 2021-05-24 06:20:42
Most probably Window is undefined because your page is rendering on the server-side.很可能 Window 未定义，因为您的页面正在服务器端呈现。
solution: check before triggering an event or make sure your code is running on the client-side by running the script on runtime.解决方案：在触发事件之前进行检查，或者通过在运行时运行脚本来确保您的代码在客户端运行。
if you are using React or Nextjs, use the useEffect hook or componentDidMount.如果您使用 React 或 Nextjs，请使用 useEffect 钩子或 componentDidMount。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.