PWA之 推送与通知

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学习”