Question

我已经为我的网络应用程序成功构建了一个FCM通知服务工作者，到目前为止工作正常。我使用toastr在Web应用程序中显示通知。当网站未打开时，我目前遇到服务工作者的问题。这是我的代码来自firebae-messaging-sw.js：

//Firebase initialized above here
messaging.setBackgroundMessageHandler(function (payload) {
const notiTitle = payload.data.title;
var body = payload.data.body;

const opts = {
    icon : "/ui/img/icons/android-chrome-256x256.png",
    actions : [
        {
            action: 'view-ticket',
            title: 'View Ticket',
            icon: null
        }
    ],
    body: body
    //url: link
};
self.addEventListener('notificationclick', function (event) {
    const clickedNotification = event.notification;
    clickedNotification.close();

    if(!event.action) {
        return;
    }

    switch(event.action) {
        case 'view-ticket':
            var promiseChain = clients.openWindow(payload.data.link);
            break;
    }

    event.waitUntil(promiseChain);

});
return self.registration.showNotification(notiTitle, opts);

});

除了一个问题外，几乎完美地工作。当我发送第一个测试通知时，payload.data.link被解析好了。但是在下一个通知中，payload.data.link未更新，因此发送了错误的链接。我认为可能self.addEventListener在错误的地方，但我不确定该怎么做（我显然不能在return之后这样做）。

知道我应该把事件监听器代码放在哪里吗？

Answer 1

我修好了！我能够通过添加变量并在addEventListener之外移动setBackgroundMessageHandler来修复此问题，如下所示：

//Firebase started up above
var clickDestination; //init this variable

//add event listener before background message handler and use clickDestination
self.addEventListener('notificationclick', function (event) {
const clickedNotification = event.notification;
clickedNotification.close();
if (!event.action) {
    return;
}

if(event.action === 'view-ticket') {
    var promise = new Promise(function () {
        return clients.openWindow(clickDestination);
    });
    event.waitUntil(promise);
}


});


messaging.setBackgroundMessageHandler(function (payload) {
const notiTitle = payload.data.title;
var body = payload.data.body;
clickDestination = payload.data.link; //set clickDestination based on payload
/*self.addEventListener('notificationclick', function (event) {
    event.notification.close();
    event.waitUntil(self.clients.openWindow(payload.data.link));
});*/

const opts = {
    icon : "/ui/img/icons/android-chrome-256x256.png",
    actions : [
        {
            action: 'view-ticket',
            title: 'View Ticket',
            icon: '/ui/img/icons/ticket-icon.png'
        }
    ],
    body: body
};


return self.registration.showNotification(notiTitle, opts);

Firebase Cloud Messaging Service Worker和self.addEventListener的问题

1 个答案: