PWA 添加到主屏幕不显示弹出窗口 [英] PWA add to home screen not showing popup
问题描述
我为我的静态站点实现了 PWA.Service Worker 注册成功,我的页面也按我预期的那样离线工作,但真正的问题是添加到主屏幕
I implemented PWA for my static site. service worker register successfully and my page is also working in offline as I expected but the real problem is in add to Home screen
我将 manifest.json 包含在适当的图标中,但仍然没有看到添加主屏幕弹出,并且在尝试将添加到主屏幕时,只有我能够看到弹出窗口
I included manifest.json with appropriate icons and still, I don't see the add home screen pop up and while trying to push the add to home screen from inspected only i able to see the popup
这是我的网站 URL:https://www.savesoftinc.com/
This my site URL: 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"
}
]
}
并尝试使用下面的代码来弹出横幅正如谷歌所建议的
And also try the below code to pop up the banner as suggested by google
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');
});
但它显示错误:
未捕获的引用错误:未定义 btnAdd
Uncaught ReferenceError: btnAdd is not defined
ref:https://developers.google.com/web/fundamentals/app-install-banners/
推荐答案
添加到主屏幕 (A2HS) 自动弹出测试的第一步是使用灯塔审核工具.
您需要在那里运行 PWA 审计并纠正警告,直到您看到
---可以提示用户安装Web App"
The first step for Add to Home Screen (A2HS) automatic pop-up testing is using the lighthouse audit tools.
You need to run the PWA audit and correct warnings there until you see
--- "User can be prompted to install the Web App"
灯塔审计工具可作为 Chrome 开发工具中的选项卡或 Chrome 扩展程序使用.
该扩展程序通常具有更新的功能.
The lighthouse audit tools are available as a tab in the Chrome dev tools or as a Chrome extension.
The extension usually has the more current features.
看到该消息后,您可以在 Chrome 桌面和 Android(Chrome 和 Edge)上测试自动弹出消息
Once you see that message you can test the automatic pop-up message on Chrome Desktop and Android (Chrome & Edge)
注意事项
在您第一次看到它后,要再次看到弹出窗口,您可能需要完全清除浏览器缓存并为
Edge - 删除快捷方式
Chrome 桌面 - 在此处卸载应用程序:chrome://apps/
Crome Android - 卸载应用程序中的 WebApk
After you see it the first time, to see the pop-up again you will probably need to totally clear out your browser cache and for
Edge - delete the shortcut
Chrome Desktop - uninstall the app here: chrome://apps/
Crome Android - uninstall the WebApk in your applications
一旦您知道自动 A2HS 弹出窗口的工作原理,您就可以(如果需要)拦截自动弹出窗口以减少对用户的干扰.向他们展示一个按钮,让他们知道他们可以在方便时使用 A2HS.
如此处所述
https://developers.google.com/web/fundamentals/app-install-横幅/
Once you know the automatic A2HS popup works you can then (if desired) intercept the automatic pop-up to make it less annoying to your users. Show them a button to let them know they can A2HS when convenient for them.
As described here
https://developers.google.com/web/fundamentals/app-install-banners/
这是我的 A2HS 测试仪.
您将看到按钮显示而不是自动弹出.
Here is my tester for A2HS.
You will see the button show instead of the automatic pop-up.
这篇关于PWA 添加到主屏幕不显示弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!