16、网页应用与服务工作线程的数据交互及PWA评估工具

网页应用与服务工作线程的数据交互及PWA评估工具

1. 使用MessageChannel进行双向通信

在进行消息发送时，我们可以添加一个检查，以确定我们要发送消息的窗口是否就是发送原始消息的窗口。如果是，则跳过该窗口，继续处理下一个窗口。以下是相应的代码：

self.addEventListener('message', function (event) {
  console.log('SW: Message event fired');
  console.dir(event);
  console.log(`SW: Subscription status: ${event.data.subscription}`);
  // 获取所有客户端窗口
  self.clients.matchAll().then(clients => {
    // 遍历每个窗口
    clients.forEach(client => {
      if (client.id === event.source.id) {
        // 该窗口是否就是告知我们订阅事件的窗口？
        console.log(`SW: Skipping affected window (${client.id})`);
      } else {
        // 向窗口发送消息
        console.log(`SW: Notifying ${client.id}`);
        client.postMessage({ subscription: event.data.subscription });