PWA 实践经验 添加到桌面及 ga 统计

Question

添加到桌面功能

通过指定 manifest，PWA 可以实现添加到桌面图标功能，官方翻译叫“网络应用安装横幅”，详细可看 这里，这里要注意的是图标一定要是 png 图片。其他的按照上面说的去做一般不会有太大问题，在安卓手机上。

用户信息统计

针对PWA，我们要统计其中产生的价值，则需要进行一些用户统计功能，我做了其中两种统计。

manifest 启动 url 统计

manifest 配置清单里面的的 start_url 并不是简单的指向首页，而是 https://首页/?utm_source=pwa&utm_medium=pwa_homescreen&utm_campaign=homescreen，然后就可以利用 ga 的流量获取统计功能进行统计。一个月统计下来，月访问量84万的网站，有1065的访问量来自PWA（从图标点击进来），最后成功交易有16次，3000 多刀的收入。转化率大概 1.5%，这个数据在PWA刚上线的时候会高一点，大概是一个app刚安装和躺在手机很久了，点击率是有点不一样的。当然转化率还会跟产品和性能等有关系，这个数据与PWA的关联并不大

安装到桌面的统计

chrome 在弹出应用安装横幅的时候，会触发 beforeinstallprompt事件，在这个事件中可以进行一些统计，相关代码如下

window.addEventListener('beforeinstallprompt', function(e) {
    // beforeinstallprompt Event fired
    // e.prompt();
    // e.userChoice will return a Promise.
    e.userChoice.then(function(choiceResult) {
    //   alert(choiceResult.outcome);
        let eventValue = (choiceResult.outcome === 'dismissed') ? 0 : 1 /* 0取消，1安装 */
        //ga热门事件统计代码
    });
  });

实际统计数据表明，没有任何推广的情况下，大概有4%的人会同意安装应用横幅。