通过 Chrome 中的 service-worker.js 接收通知 24/7答案

【问题标题】：Receive notifications 24/7 via service-worker.js in Chrome通过 Chrome 中的 service-worker.js 接收通知 24/7
【发布时间】：2016-08-18 15:20:47
【问题描述】：

我一直在做推送通知，当我注册页面然后通过 curl 命令对其进行测试时，我收到了通知！

但是过了一段时间（可能 1-2 分钟），当我关闭推送通知范围已注册的选项卡，然后再次测试通知时，我无法收到通知。这通常发生在手机的谷歌浏览器中。

我在这里所做的解决方法是我需要先转到作用域页面的页面，然后当我再次测试通知时，它现在可以工作了。虽然我不能这样做，因为我需要客户在不一直在网站上的情况下接收通知。

这是我在 service worker 中的推送事件

self.addEventListener('push', function(event) {
    var SOME_API_ENDPOINT = "https://somewhre.com/push_notification_api/service_worker_endpoint";

    event.waitUntil(
        fetch(SOME_API_ENDPOINT, {
                method: 'post',      
                headers: {  
                    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
                },  
                body: 'subscription_id=' + subscriptionId
            }).then(function(response) {

            return response.json().then(function(data) {
                var title = data.notification.title;
                var message = data.notification.message;
                var icon = base + "assets/images/logo_notification.png";
                var notificationTag = data.notification.url; 
                // var notificationTag = 'https://google.com'; //data.notification.tag;
                return self.registration.showNotification(title, {
                    body: message,
                    icon: icon,
                    tag: notificationTag
                });
            });
        })
    );
});

即使我不在 SW 注册范围的页面中，我如何让我的服务人员 24/7 全天候运行？

我需要使用 eventListeners 'install'、'activate' 和 'fetch' 吗？

【问题讨论】：

标签： javascript push-notification service-worker

【解决方案1】：

Service Worker 似乎会持续存在，但实际上不会 - 一个新的实例会启动以响应事件。在移动设备上重新启动以处理推送事件时会出现这种情况，但也有人建议繁忙的服务人员应该允许并行多个实例。

您的subscriptionId 是一个全局参数，因此在您的push 事件触发时它很可能是undefined。

要解决此问题，您需要将 subscriptionId 保留在某种存储中（可能是 IndexedDB）。

我还认为，为了让服务人员持续存在，它需要有一个 install 事件并且该事件需要成功。

【讨论】：