[英]Add to Home Screen not prompt after Beforeinstallprompt event fired
即使在符合所有 PWA 规范并在 Light House 上进行检查后,添加到主屏幕也不会提示。
我试过下面的代码来检查应用程序是否已经安装。 但是 appinstalled 事件没有被触发并且 beforeinstallprompt 事件被成功触发。
// 已安装应用
window.addEventListener('appinstalled', (evt) => { app.logEvent('a2hs', 'installed'); });
// 安装前提示
window.addEventListener('beforeinstallprompt', (event) => {
event.preventDefault();
deferredPrompt = event;
});```
// manifest.json
`{
"name": "demo",
"short_name": "demo",
"icons": [{
"src": "/static/public/icon/icon-192x192.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/static/public/icon/icon-512x512.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"orientation": "portrait",
"display": "standalone",
"theme_color": "#085689",
"background_color": "#085689",
"gcm_sender_id": "103xx3xxx50x",
"gcm_user_visible_only": true
}
`
// service worker
`self.addEventListener('fetch', (event) => {
console.log('event', event);
});`
从您的代码中删除此行
event.preventDefault();
从 Chrome 76 开始,preventDefault() 停止了自动迷你信息栏的出现
更多细节在这里
https://developers.google.com/web/fundamentals/app-install-banners/
event.preventDefault();
这导致了你的问题。 去掉它。
通过删除event.preventDefault()
您不再可以控制事件!
我建议以精益的方式来控制事件,并获取有关安装的信息,请尝试以下代码:
window.addEventListener('beforeinstallprompt', (event) => {
event.preventDefault();
deferredPrompt = event;
deferredPrompt.prompt();
deferredPrompt.userChoice.then(result => {
if(result.outcome === "accepted") {
// TODO whatever you want to do when the user accept to install the app
} else {
// TODO whatever you want to do when the user refuse to install the app
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.