返回

Service Worker发送消息通知

前端

 
 

服务工作者发送消息通知

  用Service Worker进行消息推送，离不开对Service Worker进行相关的配置与注册，这是最基本的前提。现在就让我们看看它是如何进行工作的。

1. 将Service Worker注册为浏览器默认服务工作者

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
        // Service worker 注册成功
    }).catch(function(error) {
        // Service worker 注册失败
    });
}

2. 在Service Worker中监听消息通知推送事件

self.addEventListener('push', function(event) {
    const data = event.data.json();
    self.registration.showNotification(data.title, data.options);
});

3. 给用户发送一个消息通知推送

self.registration.pushManager.getSubscription().then(function(subscription) {
    if (subscription) {
        const payload = JSON.stringify({
            title: '这是标题',
            options: {
                body: '这是正文',
                icon: '/icon.png'
            }
        });
        fetch('/send-notification', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: payload
        }).then(function(response) {
            // 消息通知推送成功
        }).catch(function(error) {
            // 消息通知推送失败
        });
    }
});

注意事项

  有几点需要注意，首先，Service Worker只有在激活状态下才能收到推送事件，所以一定要确保在你的Service Worker中添加激活监听器。其次，在发送推送请求时，需要用到用户的订阅信息，所以一定要在Service Worker中添加订阅监听器，以便在用户订阅时获取到订阅信息。最后，消息通知推送需要在用户允许的情况下才能发送，所以要在你的网站上添加一个按钮，让用户可以订阅消息通知推送。

更多阅读