作者:七里汀 | 来源:互联网 | 2022-12-09 11:52
我为我的静态站点实施了PWA。服务人员成功注册,并且我的页面也可以按预期脱机工作,但真正的问题在于添加到主屏幕
我仍然使用带有适当图标的manifest.json添加了图片,但仍然看不到弹出的主屏幕,并且在尝试从检查状态将添加到主屏幕的过程中,我只能看到弹出窗口
我的网站网址:https : //www.savesoftinc.com/
清单JSON:
{
"name": "Save Soft",
"short_name": "SaveSoft",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#0EC3F7",
"description": "IT Services & Solutions.",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/ms-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png",
"density": "5.0"
}
]
}
并尝试以下代码弹出谷歌建议的横幅
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;
// Update UI notify the user they can add to home screen
btnAdd.style.display = 'block';
});
btnAdd.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
btnAdd.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// 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;
});
});
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});
但显示错误:
未捕获的ReferenceError:未定义btnAdd
参考:https : //developers.google.com/web/fundamentals/app-install-banners/
1> Mathias..:
添加到主屏幕(A2HS)自动弹出测试的第一步是使用灯塔审核工具。
您需要运行PWA审核并在那里纠正警告,直到看到
---“可以提示用户安装Web应用程序”
灯塔审核工具可作为Chrome开发者工具中的标签或Chrome扩展程序使用。
该扩展程序通常具有更多最新功能。
看到该消息后,您可以在Chrome桌面和Android(Chrome和Edge)上测试自动弹出消息。
注意事项
第一次看到该消息后,可能需要完全清除才能再次看到该弹出窗口退出浏览器缓存并
进入Edge-
删除快捷方式
Chrome桌面-在此处卸载应用:chrome:// apps /
Crome Android-卸载应用中的WebApk
一旦知道了自动A2HS弹出窗口的工作原理,您就可以(如果需要)拦截自动弹出窗口,以使其对您的用户不那么令人讨厌。给他们显示一个按钮,让他们知道在他们方便时可以使用A2HS。
如此处所述
https://developers.google.com/web/fundamentals/app-install-banners/
这是我的A2HS测试仪。
您将看到按钮显示,而不是自动弹出窗口。