Push 和 Notification 是两个不同的功能,涉及到两个 API,但是它们之前有依赖关系。
关于 Notification 我们之前在 HTML 5 API 中有所介绍,这里再进行一下简单的回顾:
// 判断浏览器是否支持 Notification
if (window.Notification) {
// 调用 Notification 的 requestPermission 方法来询问用户是否允许通知、返回一个 promise
Notification.requestPermission()
.then((permission) => {
// 当用户选择允许通知时,Notification.permission 的值为 granted
if (Notification.permission === 'granted') {
// 将新建的通知存储在 notification 变量里面
// 新建的通知包括标题、icon 图标以及内容
let notification = new Notification("sir, you got a message", {
icon: './app.png',
body: 'you will have a meeting 5 minutes later.',
});
// 为 notification 添加点击事件
notification.addEventListener('click', function () {
console.log('6666');
})
}
});
}
效果:
至于 Push,该 API 允许 Service Worker 处理来自服务器的推送消息,即使应用程序处于不活动状态。
Push 和 Notification 的关系如下:
- Push:服务器端将更新的信息传递给 Service Worker
- Notification:Service Worker 将更新的信息推送给用户
当服务器有数据传递过来时,我们只需要在 Service Worker 里面监听 push 事件,然后做出相应的处理,如下:
// 当服务器端向客户端 push 数据时,会触发次事件
// 在 Application 中的 Service Workers 面板中,可以直接模拟服务器向客户端发送数据
// 这里我们推送的数据如下:
// {"msg":"this is a test","url":"https://www.baidu.com/","icon":"./app.png"}
self.addEventListener('push', function (event) {
// 检查服务端是否发来了任何有效载荷数据
console.log('event.data:',event.data.text()); // event.data: {"msg":"this is a test","url":"https://www.baidu.com/","icon":"./app.png"}
const payload = event.data ? JSON.parse(event.data.text()) : 'no payload';
console.log(payload); // {msg: "this is a test", url: "https://www.baidu.com/", icon: "./app.png"}
const title = 'Progressive Times';
event.waitUntil(
// 使用提供的信息来显示 Web 推送通知
self.registration.showNotification(title, {
body: payload.msg,
data: payload.url,
icon: payload.icon
})
);
});
在上面代码中,我们在 Service Worker 中监听 push 事件,当服务器向客户端推送数据时,该事件会被触发,在此事件中,我们组装了一条推送消息,向客户端进行推送。
一般来讲,当弹出推送的消息时,用户如果点击该消息,会跳转到对应页面上去。(例如 Facebook)此时我们可以在 Service Worker 中监听 notificationclick 事件,并在此事件的事件处理器中进行页面跳转的逻辑,代码如下:
self.addEventListener('notificationclick', event => {
// 关闭当前的弹窗
event.notification.close();
// 在新窗口打开页面
event.waitUntil(
// event.notification.data 取出推送通知中的数据
clients.openWindow(event.notification.data)
);
});
在上面的代码中,我们在 Service Worker 中监听了 notificationclick 事件,当触发此事件时,会先关闭当前的弹窗,然后在新窗口打开指定链接的页面。具体效果如下:
了解更多请关注公众号“朗沃IT学习”