PWA实战（4）—Notification

PWA
留言

推送通知 ( Push Notification )或者也可以称作推播，有智慧手机的人我想应该非常熟悉，尤其是App盛行的时期几乎每只App都会有推送通知功能，这也是恶梦的开始，你会发觉在大半夜里你的手机会三不五时地叫你起床，所以现在的手机几乎都内建了勿扰模式，让使用者可以设定每天的某个时段可以封锁特定的讯息通知，甚至现在的系统都可以让使用用决定App允许那些权限。

推送通知就像一把双刃剑，懂得善用它可以提升用户体验，反之，若滥用它则会让使用者观感不好。

体验pwa推送

这个网站可以让你体验一下pwa推送，可以在pc和手机上分别体验。
链接：https://web-push-book.gauntface.com/demos/notification-examples/

推送通知条款

  • 通知 - 在应用程序的普通用户界面（即浏览器）之外向用户显示的消息
  • 推送消息 - 从服务器发送到客户端的消息
  • 推送通知 - 响应推送消息而创建的通知
  • 通知API - 用于配置和向用户显示通知的界面
  • Push API - 用于将应用程序订阅到推送服务并在服务工作者中接收推送消息的接口
  • Web Push - 一个非正式术语，指的是将消息从服​​务器推送到Web上的客户端过程中涉及的过程或组件
  • 推送服务 - 用于将推送消息从服务器路由到客户端的系统。每个浏览器都实现自己的推送服务。
  • Web推送协议 - 描述应用程序服务器或用户代理如何与推送服务交互

实战操作

参考链接：https://developers.google.com/web/fundamentals/codelabs/push-notifications/?hl=zh-cn

练习源码：

1
git clone https://github.com/GoogleChrome/push-notifications.git

模拟推送服务器：https://web-push-codelab.glitch.me/

推送服务

实际应用中，需要搭建推送服务负责想客户端推送消息
网络推送库：https://github.com/web-push-libs/
nodejs使用的web-push库：https://www.npmjs.com/package/web-push

关于墙的问题

推送服务的流程类似于，自己搭建的推送服务发送通知到浏览器厂商搭建的推送服务，浏览器厂商搭建的推送服务识别后发送到对应的浏览器客户端。这个过程依赖浏览器厂商搭建的推送服务。目前对pwa推送规范支持最好的有chrom浏览器和firefox浏览器，因为墙的原因，chrome浏览器的推送服务无法送达，但firefox没有任何问题。所以想使用pwa推送的话，建议用户使用firefox浏览器就可以了。