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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

结语

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

感谢阅读

更多专业前端知识，请上 【猿2048】www.mk2048.com