javascript - 通过 Service Worker 收到的 Chrome 通知是批量的还是实时的？

Question

我正在尝试为我的网站实现浏览器推送通知。我注意到即使浏览器收到通知，有时也不会显示通知。

var showNotification = function (event, data) {
    var notificationData = data['data'];
    var title = notificationData['title'];
    var body = notificationData['body'];
    var icon = notificationData['icon'];
    var notificationActionsData = notificationData["actions"];
    var actions = [];

    if(notificationActionsData) {
        for(var i=0; i < notificationActionsData.length; i++) {
            var action = {
                action: "action" + i,
                title: notificationActionsData[i].title,
            };
            actions.push(action);
        }
    }

    var campaignId = notificationData["id"];
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        data: notificationData,
        tag: notificationData.id,
        actions: actions
    });

    pushowlReporting.tickle(campaignId, "delivery");
};

function processNotification(event) {
    if (event.data) {
        var data = event.data.json();
        showNotification(event, data);
    }
    else {
        fetch("https://" + hostname + "/api/v1/subdomain/" + subdomain + "/campaign/", {'mode': 'no-cors'}).then(
            function (response) {
                if (response.status !== 200) {
                    console.log('Looks like there was a problem. Status Code: ', response.status);
                    return;
                }

                // Examine the text in the response
                response.text().then(function (responseText) {
                    var data = JSON.parse(responseText);
                    showNotification(event, data);
                });
            }
        ).catch(function (err) {
                console.log('Fetch Error :', err);
            }
        );
    }
}

self.addEventListener('push', function (event) {
    event.waitUntil(processNotification(event));
});

我的报告 API 显示通知已送达，但浏览器间歇性地显示通知。

通知显示非常不稳定。有时通知会立即显示，有时则一段时间不显示，突然所有过去的通知都批量出现。有时某些通知根本不会显示。

如果我在这里做错了什么，请告诉我？

Answer 1

传递给 event.waituntil 的函数应该返回一个 promise 。如果不是，范围就会困惑，因为事件的生命周期不会延长。 https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil

var showNotification = function (event, data) {
    var notificationData = data['data'];
    var title = notificationData['title'];
    var body = notificationData['body'];
    var icon = notificationData['icon'];
    var notificationActionsData = notificationData["actions"];
    var actions = [];

    if(notificationActionsData) {
        for(var i=0; i < notificationActionsData.length; i++) {
            var action = {
                action: "action" + i,
                title: notificationActionsData[i].title,
            };
            actions.push(action);
        }
    }

    var campaignId = notificationData["id"];
    return self.registration.showNotification(title, {
        body: body,
        icon: icon,
        data: notificationData,
        tag: notificationData.id,
        actions: actions
    }).then(function (succ) {
        pushowlReporting.tickle(campaignId, "delivery");
    });
};
function processNotification(event) {
    if (event.data) {
        var data = event.data.json();
        return showNotification(event, data);
    }
    else {
        return fetch("https://" + hostname + "/api/v1/subdomain/" + subdomain + "/campaign/", {'mode': 'no-cors'}).then(
            function (response) {
                if (response.status !== 200) {
                    console.log('Looks like there was a problem. Status Code: ', response.status);
                    return;
                }

                // Examine the text in the response
                response.text().then(function (responseText) {
                    var data = JSON.parse(responseText);
                    showNotification(event, data);
                });
            }
        ).catch(function (err) {
                console.log('Fetch Error :', err);
            }
        );
    }
}

我刚刚在您的代码中添加了 return 语句。试试这个。