javascript - 如何导出服务工作者中的事件接收到的数据以响应组件
问题描述
我正在使用 pushy.me 服务来接收推送通知,并且我将一切设置正确。所以现在我正在接收服务工作者文件中的推送,我可以在控制台中显示它,但问题是我必须在我的反应组件中访问推送的数据,所以我如何导出服务工作者中的 fenched 数据并从中访问它我的反应组件或任何其他 js 文件?
我假设我可以在服务人员的事件中抛出另一个事件并从任何其他组件接收它,但我无法做到,因为我对事件真的很陌生!
这是 service-worker.js 文件:
// Import Pushy Service Worker 1.0.3
// Listen for incoming push notifications
self.addEventListener("push", function(event) {
// Extract payload as JSON object, default to empty object
var data = event.data.json() || {};
console.log(data);
var e = new CustomEvent("build", { data });
// Extract notification image URL
var image = data.image || "https://sdk.pushy.me/web/assets/img/icon.png";
// Notification title and body
var title = data.title || "";
var body = data.message || "";
// Notification options
var options = {
body: body,
icon: image,
badge: image,
data: {
url: data.url
}
};
// Wait until notification is shown
event.waitUntil(self.registration.showNotification(title, options));
});
// Listen for notification click event
self.addEventListener("notificationclick", function(event) {
// Hide notification
event.notification.close();
// Attempt to extract notification URL
var url = event.notification.data.url;
// Check if it exists
if (url) {
// Open the target URL in a new tab/window
event.waitUntil(clients.openWindow(url));
}
});
解决方案
Service Worker 和常规 JavaScript 执行上下文之间可用的通信通道是 postMessage。您在客户端代码(React 代码)中附加 postMessage 事件侦听器,然后从 Service Worker 发送消息。
https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage
推荐阅读
- php - 结合验证日期和未验证数据存储在 laravel 中
- node.js - 如何构建 NodeJs 代码
- node.js - 如何在nodejs中使用'select if'函数和sequelize
- mysql - 加密的电子邮件 ID 不区分大小写 MySQL
- sinch - 如何在 Sinch 中结束“群呼”
- android - Why do we need LiveData and ViewModel
- lua - Lua中的“$”符号是什么意思?
- r - 试图了解附加在 R 中的使用
- python - Python 3.7 - ImportError:绘图需要matplotlib
- android - 从 JSON 显示部分数据的困难