对于大部分用户来说,将webapp添加到桌面并不是一个常见的操作,也很少会又用户主动的将添加,所以为了友好的用户体验,我们需要给程序加上一些引导(由于属性支持度并不高,为了能完整的体验功能,建议使用 Chrome Beta for Android 浏览器进行测试。)
如何进行引导
适时地弹出应用安装横幅去引导用户进行添加操作。PWA 提供的应用安装横幅如下图所示:
image
用户只需点击横幅上的添加应用按钮,即可将 PWA 添加到他们的主屏幕。相比起用户主动操作,弹出应用安装横幅的形式更直观,操作更简便,用户的应用添加率也会更高。
显示应用安装横幅的条件
惯例,介绍之类的就不多说了,详细。
开始操作
先给程序添加一个按钮绑定点击事件,并且让他隐藏。
image.png然后给window添加一个beforeinstallprompt
事件,并且通过按钮点击事件来拉起应用横幅,然后监听用户的操
created() {
window.onbeforeinstallprompt = (e) => { //当浏览器触发横幅显示事件
console.log(e);
this.prompt = true;
this.deferred = e;
}
},
methods: {
deferredPrompt(e) {
if (e) {
e.prompt(); //拉起添加横幅事件
// 通过按钮点击事件触发横幅显示
e.prompt();
// 监控用户的安装行为
e.userChoice.then((choiceResult) => {
console.log(choiceResult.outcome);
if (choiceResult.outcome === 'dismissed') {
console.log('用户取消了安装');
}
else {
console.log('用户已安装程序');
this.prompt = false; //隐藏按钮
this.deferred = null;
}
});
}
}
},
网友评论