Vue+PWA添加应用横幅

对于大部分用户来说，将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;
                        }
                    });
                }
            }
        },