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

Posted 2023-02-24

【中文标题】Service-Worker addEventListener，如何使用事件参数？

【英文标题】：Service-Worker addEventListener, how to use the event parameter?

【发布时间】：2018-05-23 09:32:07

【问题描述】：

我现在正在尝试让推送通知与 Node.js 一起工作。

为此，我遵循了一些可以在网上找到的教程和文档，我终于有了一些使用所谓的 Service Worker 的东西。

在这一点上，Node.js 和 Service Worker 上的推送通知都不是我所熟悉的。

这是我的相关代码：

.....
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的第二个参数。 那是事件参数。在我看来，这个参数对于向Service Worker传递信息一定很重要，但在我的例子中它完全没用，我不知道如何使用它。

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

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

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

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

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

【参考方案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'
    )
);

【讨论】：

因此，如果（例如）我希望出现“我的标题”而不是“未定义”。我应该如何更改代码？修改名为 any 我猜的字段？

只要来自服务器的推送消息包含title属性，上面的代码就可以工作

现在不行了，只显示“未定义”。而我所尝试的一切只能显示“未定义”。所以这不是真的有效。我的问题（我想）是我不知道如何正确设置 title 属性。

那是你的Push api服务，你需要在push消息中包含title

服务器代码看起来不错。您确定使用e.data.json() 获取数据吗？