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语句。试试这个。

是否通过服务工作人员批量或实时收到Chrome通知？

1 个答案: