为什么我在客户端上没有收到 client.postMessage ？

发布于 2025-01-11 11:48:37 字数 766 浏览 3 评论 0原文

我的服务工作人员中有此代码：

messaging.onBackgroundMessage(function (payload) {
  console.log("onBackgroundMessage email and contact_link:");
  console.log(payload.data.email,payload.data.contact_link);

  self.clients.matchAll().then(clients => {
    clients.forEach(client => client.postMessage({
      msg: "This is a message from the SW",
      email: payload.data.email,
      contact_link: payload.data.contact_link
    }));
})
});

我在客户端上有此代码：

navigator.serviceWorker.addEventListener('message', payload => {
  console.log("Message from ServiceWorker");
  console.log(payload.data.msg, payload.data.email, payload.data.contact_link);
});

我从服务工作人员的控制台上正确获取了数据，但是客户端的控制台显示所有数据均未定义。为什么会这样，我做错了什么？

原文

I have this code in my service worker:

messaging.onBackgroundMessage(function (payload) {
  console.log("onBackgroundMessage email and contact_link:");
  console.log(payload.data.email,payload.data.contact_link);

  self.clients.matchAll().then(clients => {
    clients.forEach(client => client.postMessage({
      msg: "This is a message from the SW",
      email: payload.data.email,
      contact_link: payload.data.contact_link
    }));
})
});

I have this code on the client:

navigator.serviceWorker.addEventListener('message', payload => {
  console.log("Message from ServiceWorker");
  console.log(payload.data.msg, payload.data.email, payload.data.contact_link);
});

I get the data properly on the console from the service worker, however the client's console says all the data is undefined.
Why is that, what am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

农村范ル 2025-01-18 11:48:37

我仍然不知道为什么它不起作用，但我在服务器上使用了这段代码：

const channel = new BroadcastChannel('sw-messages');
channel.postMessage(payload.data);

而在客户端上使用了这段代码：

const channel = new BroadcastChannel('sw-messages');
channel.addEventListener('message', event => {
    console.log('Received:', event.data);
});

它运行良好。

I still do not know why it does not work, but I used this code on the server:

const channel = new BroadcastChannel('sw-messages');
channel.postMessage(payload.data);

And this code on the client instead:

const channel = new BroadcastChannel('sw-messages');
channel.addEventListener('message', event => {
    console.log('Received:', event.data);
});

It works well.

回复收藏 0 原文

梦归所梦 2025-01-18 11:48:37

默认情况下，client.postMessage() 方法仅将消息发送到由 Service Worker 控制的客户端（页面）。

您可以修改clients.matchAll()以包含不受控制的客户端：

self.clients.matchAll({ includeUncontrolled: true }).then((clients) => {
  clients.forEach((client) => {
    client.postMessage({
      type: "background-message",
      payload: payload.data,
    });
  });
});

The client.postMessage() method by default only send messages to clients (pages) that are controlled by the service worker.

You can modify clients.matchAll() to include uncontrolled clients:

self.clients.matchAll({ includeUncontrolled: true }).then((clients) => {
  clients.forEach((client) => {
    client.postMessage({
      type: "background-message",
      payload: payload.data,
    });
  });
});

回复收藏 0 原文

~没有更多了~