PWA无法弹出添加左面提示功能
百度很多教程都说pwa应用可以弹出一个 《是否添加到桌面》这样的提示框
也按照lavas框架的文档应用添加横幅去设置，还是达不到效果，请问一下我究竟那里写错了
需求： 弹出提示框，提示是否添加应用到桌面
测试： （打包后使用express开启本地服务器测试的）
chrome浏览器 点击 add to homescreen 可以添加网页到桌面
ios: 10.0.2 safari可以添加到桌面,uc无法添加网页到桌面，两者都无法弹出提示框
安卓: 没有测试
技术：
前端： vue
后端： node
代码：
manifest.json
{
"name": "web_app",
"short_name": "web_app",
"scope": "/",
"description": "The app that helps you understand PWA", //用于描述应用
"display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
"start_url": "/", // 应用启动时的url
"theme_color": "#313131", // 桌面图标的背景色
"background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
"icons": [ // 桌面图标，是一个数组
{
"src": "/static/images/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/static/images/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}, {
"src": "/static/images/apple-touch-icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
]
}
sw-register.js
navigator.serviceWorker && navigator.serviceWorker.register('/service-worker.js').then(() => {
//
})
// 「弹出添加到主屏对话框」事件
window.addEventListener('beforeinstallprompt', event => {
// 这个 `event.userChoice` 是一个 Promise ，在用户选择后 resolve
event.userChoice.then(result => {
console.log(result.outcome)
// 'accepted': 添加到主屏
// 'dismissed': 用户不想理你并向你扔了个取消
})
})构建使用sw-precache-webpack-plugin sw-register-webpack-plugin
webpack.prod.conf
// service worker caching
new SWPrecacheWebpackPlugin(config.swPrecache),
new SwRegisterWebpackPlugin({
filePath: path.resolve(__dirname, '../src/sw-register.js')
})index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="manifest" href="/static/manifest.json">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="web_app">
<link rel="apple-touch-icon" href="/static/images/apple-touch-icon-120x120.png">
<!-- Add to home screen for Windows -->
<meta name="msapplication-TileImage" content="/static/images/msapplication-icon-152x152.png">
<meta name="msapplication-TileColor" content="#000000">
<title>douban</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
查阅兼容性
挺多浏览器不怎么兼容这些api
请问后来解决了吗 我用chrome也弹不出来。。
首先更新你的 Chrome 版本到 64 或以上。
然后在地址栏输入 chrome://flags，找到 Desktop PWAs 的选项将其 Enabled 了，然后 Chrome 会提示你重启浏览器。
重启浏览器后，PWA 添加到桌面的特性就已经具备了。