我使用Angular的指南创建了一个PWA。我遇到了拦截应用程序安装横幅的问题。我正在使用以下代码将其延迟到稍后:
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
console.log("Intercepting the app install banner prompt");
setTimeout(function() {
deferredPrompt.prompt();
}, 20000);
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
我的清单文件:
{
"name": "TreadWill",
"short_name": "TreadWill",
"theme_color": "#2a3b3d",
"background_color": "#2a3b3d",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
当我在本地主机上尝试运行此代码时,控制台日志中包含的消息得以记录,但是20秒后,我收到了一个错误:
Uncaught (in promise) DOMException
在这行代码中:
deferredPrompt.prompt();
当我在移动设备上托管代码并尝试运行时,应用安装横幅会立即显示,而不是在20秒后显示。
我已经尝试将此代码放入index.html文件本身中,放入单独的js文件并在index.html文件中调用。创建一个服务并在.ts文件中包含几乎相似的代码。但是没有任何作用。虽然出于绝望之下,我正在尝试使用js解决方案,但我更喜欢Angular解决方案。理想情况下,我想捕获并存储“beforeinstallprompt”事件到全局变量,并在不同的点提示该事件。
如何解决这个问题?