【JSConf EU 2018】有关浏览器弹出式窗口的相关探讨

在前端大爆发的今天，随着层出不穷的新技术和新框架的不断推出和W3C标准的不断更新，前端开发已经不局限于展现服务端返回的信息，而更多的去关注功能，这也带给了咱们更多思考。

本次JSCONF2018大会上就有一个内容，标题为《Aggressive Web Apps》，直译为侵略性的页面应用，但我更喜欢叫它《更好的浏览器弹出式窗口》。

提到浏览器弹出式窗口，没接触过的人可能会很陌生，可是若是我叫它浏览器桌面推送可能会更好理解，即便在实际生活中没有用到过浏览器桌面推送，乱七八糟的应用推送也会让人记忆深入。为何说它乱七八糟，由于不少消息用户真的不关心，不想要，它都会强制推送出来。一样，浏览器桌面推送也会存在这个问题。

接下来，就三个模块，分别说明浏览器桌面推送的实现，怎样给用户带来更好的浏览器桌面推送，如何优雅的获取桌面推送权限。

1、浏览器桌面推送的实现

首先你须要有一个正在使用的页面，而且注册并安装了Serviceworker(注：service worker 是一段运行在浏览器后台进程里的脚本，它独立于当前页面，提供了那些不须要与web页面交互的功能在网页背后悄悄执行的能力)，在注册Servieworker时，你能够去向用户请求弹出式窗口的权限，若是用户确认受权，即可得到一个浏览器桌面推送服务的URL和一对密钥。接下来当你想推送一个桌面推送到用户页面，能够经过服务器向刚刚获取的桌面推送服务的URL发送一个弹出请求，并经过得到的密钥加密，这样浏览器就没法直接获取你给用户发送的消息，也会让整个推送过程更加安全，弹出式窗口服务在获取到发送给用户的推送消息后，会触发对应浏览器的Serviceworker的推送事件，这样Serviceworker即可以经过浏览器展现一个桌面推送(浏览器弹出式窗口)在用户面前。

至于具体代码实现，集勤奋与智慧于一身的开发者早就找到了开(google)发(developer)的(Doc's)精(is)髓(good)，这里就再也不作过多陈诉。

这时候你可能会想了，那这个接口的兼容性如何

在Can i use咱们能够看到，虽然有一部分浏览器还显示为不支持状态，可是在一句“您的浏览器版本太低，可能存在安全风险，建议升级浏览器”即可解决曾经困扰咱们好久的兼容性问题的时代，开发者大可大胆的像前考虑去使用新的特性来给用户带来更好的体验。(PS : W3C专门作了一个页面(成绩单)来向各大浏览器厂商平行展现哪些功能他们支持哪些功能他们没支持，谁支持了谁没支持，来督促厂商兼容新特性)

因此开发实现不是咱们如今所面临的问题，并且一切能用开(work)发(overtime)解决的问题都不是问题。但如今在咱们所面临的，远比技术实现要复杂的多，那就是如何让浏览器桌面推送能给用户带来更好的体验，而不是被扼杀在摇篮之中，这也就引出了下一个话题，怎样给用户带来更好的浏览器桌面推送。

2、怎样给用户带来更好的浏览器桌面推送

混乱的市场乱象已经让用户对不管是浏览器桌面推送，仍是应用桌面推送，都深恶痛绝，以致于常常会有这样的用户反馈。

这是开发者不想看到的，也是每个认真作产品的人不想看到的，桌面推送必定会有它的正面意义才会被构想出来，通常来讲，高质量的，好的，有用的桌面推送能带来更好的用户体验，好比用户收到了新消息须要一个推送，用户的航班即将登机须要一个推送，快递到了须要一个推送，外卖到了须要一个推送。

一个好的推送包含三个特色：时效性、交互性，针对性。

时效性：好比用户周末准备自驾游，他预定了一辆车，那么当他车子到达他的预定地点时推送这个消息就具备时效性，这个消息在他自驾游结束后就再也不须要。

交互性：有人发送给用户一个消息，快递或预约的车辆到达，航班开始登机，这些指引用户去作一些操做的，消息与用户之间存在某种交互的。

针对性：某我的收到了消息，某我的预订的车子到达，某我的的航班开始登机，这类消息具备针对性，他不是宽泛的而是有针对行的。

因此说，某一天用户打开电脑，桌面滴的弹出某某明星结婚的推送，而这位用户却并不对娱乐新闻关心，这对用户来讲并不具备时效性、交互性和针对性，因此这条推送对这个用户来讲是无心义的，长期以往会令用户感受厌烦的。固然，对于某些追星者，或者对娱乐新闻感兴趣的人，这条新闻对他就具备针对性，那么，这条推送就是一个好的推送，但系统至少应该在用户类型上作一个区分，由于一旦用户由于某些厌倦的推送关闭了整个浏览器桌面推送的话，那对整个行业生态来讲都是极其很差的。

某一天，有一个忍无可忍的用户发了这样一条推特

一个网页应用让用户感到厌倦，这是每个认真作产品的人都不想看到的，开发产品的初衷就是为用户解决问题，给用户带来方便，而不是给用户带来问题，但很不幸，如今不少页面应用已经给用户带来很差的体验了，可是身为开发者，如何能给用户体验带来提高，这就是咱们的下一个话题，如何经过优雅的申请权限来提示用户体验。

3、如何优雅的获取桌面推送权限

开发者在Web端能够申请的权限有不少种，在这里就不一一例举，主要重点讨论桌面推送权限。

永远不要在用户刚进入你的页面时就向他申请权限，由于此时用户并不知道你要作什么，你甚至没法给他一个完整的说明，在下面举一个反例。

图片中显示这是一个视频网站的首页，用户并不知道开启推送后会给他带来什么，因此一般没有用户会在此时赞成开启权限，就算开启了权限，用户接收到了他不想收到的推送，他也会产生厌倦，进而关闭该网站的推送权限，甚相当闭整个浏览器的推送权限，这都是开发者很是不肯意看到的。

而在这其中有作的比较好的站点，他会在用户操做到相关流程后，给用户一个弹窗说明，向用户说明相关内容后，再去申请权限，这样用户能够明确的知晓开启推送后将收到哪些内容，用户有了足够的心理预期，也更容易接受。最重要的，这能够避免给用户带来没必要要的麻烦。因此说，永远不要在用户刚进入你的页面时就向他申请权限。

结语

不少刚入门的开发者都觉得W3C是一个金字塔顶端的组织，其实不是的，每一个人均可以参与到将来W3C标准的制定中，本次演讲的演讲者Phil就是如此，针对如何更好的获取推送权限，他在WICG中提出了一个建议，即在申请权限时，要先与用户进行交互确认后再申请权限，无论开发者对此持什么意见，均可以在(WICG/interventions/issues/49)中发表本身的意见，只要看法足够有说服力，每一个人均可以成为规则的制定者。最后，也是Phil反复强调的，就是永远不要在用户刚进入你的页面时就向他申请权限。

感谢阅读