Service-Worker addEventListener，如何使用事件参数？

Question

我现在正在努力使推送通知与Node.js一起使用。

为此，我已经学习了一些我可以在网上找到的教程和文档，并且我终于使用所谓的服务工作者。

此时，Node.js和Service Workers上的推送通知都不是我熟悉的。

以下是我的相关代码：

.....
console.log("Registering ServiceWorker.");
const register = await navigator.serviceWorker.register('/worker.js', {
    scope: "/"
});
console.log('ServiceWorker registered.');

console.log("Registering Push.");
const subscription = await register.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapIdKey)
});
console.log('Push registered.');

console.log("Sending Push.");
await fetch('/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: {
        'content-type': 'application/json'
    }

});
console.log('Push sent.');
.....

和服务工作者：

console.log('Service Worker Loaded.');

self.addEventListener('push', e => {
    const data = e.data.json;
    console.log('Push Received');
    self.registration.showNotification(data.title, {
        body: 'It is time to go for lunch.',
        icon: 'MyLogo.png'
    })
});

还有这个，在我的index.js文件中：

// Subscribe Route.
app.post('/subscribe',(req,res) => {
    const subscription = req.body; // Get Push Subscription Object.
    res.status(201).json({}); // Sen 201. Resource created.
    // Create PayLoad.
    const payload = JSON.stringify({title:'This is a payload-title'});
    // Pass Object to sendNotification.
    webPush.sendNotification(subscription,payload).catch(err => console.error(err));
});

我想问的问题是关于使用addEventListener的第二个参数。 这是事件参数。在我看来，这个参数对于将信息传递给服务工作者来说非常重要，但在我的例子中它完全没用，我不知道如何使用它。

当我在FireFox或Chrome中运行此示例时，我可以看到此类通知：

可以看到屏幕截图上显示“未定义”。这就是来自data.title（来自e参数）。 如何更改代码以查看除“未定义”之外的其他内容？我希望能够在这个方面做出改变：

self.addEventListener('push', e => {...})

我已经尝试设置一些“标题”字段，我认为这可能是一个解决方案，但没有任何效果。我显然没有做正确的事。

换句话说，更一般地说;我想知道的是“如何使用addEventListener的事件参数”。即使是一个非常基本的例子（如何改变我的代码）也会非常感激。

Answer 1

根据Push API规范e.data是PushMessageData的实例。您会看到其界面阅读更多here。你的代码应该是：

self.addEventListener('push', function(e) {
    let data = {};

    if (e.data) {
        // IMPORTANT:
        // The following line does not use "e.data.json",
        // but "e.data.json()" !!!!!
        data = e.data.json();
    }

    self.registration.showNotification(data.title, {
        body: 'It is time to go for lunch.',
        icon: 'MyLogo.png'
    })
});