多个 Chrome 推送通知自动关闭，但最后一个除外

Question

我有一个 Service Worker 从服务器获取多个通知。问题是 Chrome 中的所有通知都会自动关闭，除了最后一个。我做错了什么？

self.addEventListener('push', function(event) {
var subscriptionId;
var sessionId;
var notification = {};

event.waitUntil(
    self.registration.pushManager.getSubscription().then(function(subscription) {
        subscriptionId = subscription.endpoint.split('/');
        subscriptionId = subscriptionId[subscriptionId.length - 1];

        notification.title = 'Yay a message.';
        notification.icon = '/app/img/icon-256x256.png';
        notification.tag = 'notification-tag-' + (new Date)*1;
        notification.messages = [];

        //get context
        fetch(requestUrl,
            {
                method: 'post',
                body: body
            }).then(function(response) {
                response.json().then(function(data) {
                    sessionId = response.headers.get('SessionId');
                    fetch(requestUrl + '?SessionId=' + sessionId, {
                        method: 'post',
                        headers: JSON.stringify({
                            'Content-Type': 'application/json'
                        }),
                        body: JSON.stringify({
                            data: {
                                subscriberId: subscriptionId
                            }
                        })
                    }).then(function(responce) {
                        responce.json().then(function(data) {
                            data = data.data;
                            if (!data.chromeNotifications || !data.chromeNotifications.length) return;
                            data.chromeNotifications.forEach(function(push) {
                                notification.messages.push(push.message);
                            });
                        }).then(function() {
                            var promises = [];
                            for(var i=0; notification.messages && i<notification.messages.length; i++) {
                                promises.push(self.registration.showNotification(notification.title, {
                                    body: notification.messages[i],
                                    icon: notification.icon,
                                    tag: notification.tag
                                }));
                            }
                            return Promise.all( promises );
                        });
                    });
                })
            });
    }).catch(function(error) {
        console.error('Unable to get subscription data', error);
        var title = 'An error occurred';
        var message = 'We were unable to get the information for this push message';
        var notificationTag = 'notification-error';
        return self.registration.showNotification(title, {
            body: message,
            tag: notificationTag
        });
    })
);

Answer 1

就在您的示例的第 13 行，在从您的服务器获取待处理通知之前，您将 tag once 设置为对于传入的推送消息是唯一的。然后，此 tag 用于第 47 行从您的服务器获取的每条消息。

通知的 tag 可用于指示，在创建通知时，该通知应在显示全新通知之前尝试替换共享相同 tag 的任何先前通知。在这种情况下，您重复覆盖了之前的通知。

解决方案是完全不使用 tag，因为无论如何您都希望它是唯一的。为错误通知保留它确实有意义 - 如果您显示两次它对用户没有帮助。

多个 Chrome 推送通知自动关闭，但最后一个除外

Multiple Chrome push notifications automatically closes except the last one

push-notification

service-worker

web-push

push-api