Service Worker中的Client.postMessage()在AngularJS控制器内未调用Onmessa

Question

服务工作者消息处理程序：

let angularClient;
self.addEventListener('message', function(event) {
// store the client which sent the message into angularClient variable    
  angularClient = event.ports[0];
 });

服务工作者通知单击处理程序，该通知将数据发送到AngularClient

self.addEventListener('notificationclick', function(event) {
event.notification.close();
var url = /localhost:8080|example.com|https://www.example.com/;
var newurl = "/" + event.notification.data.url;
if (event.notification.data.url) {
  newurl = event.notification.data.url;
}
function endsWith(str, suffix) {
  console.log(str);
  console.log(suffix);
  return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
event.waitUntil(
  clients.matchAll({
    type: 'window'
  })
  .then(function(windowClients) {
    for (var i = 0; i < windowClients.length; i++) {
      var client = windowClients[i];
      if (url.test(client.url) && 'focus' in client) {
        if (endsWith(client.url, newurl)) {
          console.log("URL matched");              
          console.log("sending 1");
          angularClient.postMessage(sendToAngularPayload);
          return client.focus();
        }
        return client.navigate(newurl)
          .then(client => client.focus());
      }
    }
    if (clients.openWindow) {
      console.log("sending 2");
      angularClient.postMessage(sendToAngularPayload); //sendToAngularPayload is defined when notification is received in firebase's messaging.setBackgroundMessageHandler.
      return clients.openWindow('https://www.example.com/#/' + 
   event.notification.data.url);
    }
  })
);
},true);

angularJS控制器具有函数

函数将消息发送给服务工作者，以便它存储此客户端

$scope.checkServiceWorker = function() {
    if ('serviceWorker' in navigator) {
        // ensure service worker is ready
        navigator.serviceWorker.ready.then(function(reg) {
            console.log("Send message");
            // PING to service worker, later we will use this ping to 
            //identify our client.
            sendMessage().then(function(event) {
                console.log(event);
            }).catch(function(error) {
                console.log("error", error);
                location.reload();
            });
        }).catch(function() {
            console.log('SW not ready');
            $scope.checkServiceWorker();
        });
    }
}

sendmessage函数带有onMessage处理程序

function sendMessage() {
    return new Promise(function(resolve, reject) {
        var messageChannel = new MessageChannel();
        messageChannel.port1.onmessage = function(event) {
            console.log("on message handler", event);
            if (event.data.error) {
                reject(event.data.error);
            } else {
                console.log('inside resolve', event.data);
                console.log("Ping received from SW");
                console.log(event);                    
                resolve(event.data);
            }
        };
        console.log("Sending");
        navigator.serviceWorker.controller.postMessage("ping", 
        [messageChannel.port2]);
        console.log("sent");
    });
}

问题在于，AngularJS控制器内部的Onmessage处理程序被驱动90％的时间，但有时却没有。正如我在开发人员控制台中看到的那样，在我在"通知单击处理程序"中打印"发送1"后，执行在ServiceWorker.js中停止，并且不会在控制器的OnMessage处理程序中显示其余日志。

worker.ts

self.addEventListener("push", e => {
 const data = e.data.json();
 console.log("Push received");
 console.log("data ", data);
 self.registration.showNotification(data.title, {
   body: "Notified",
 })
 // Broadcasting from a ServiceWorker to every client
 self.clients.matchAll().then(all => all.map(client => client.postMessage(data)));
})

侦听器被添加到Navigator.serviceworker上，而不是在特定的工人

AngularJS控制器：

constructor() {
    navigator.serviceWorker.addEventListener('message', e => console.log(e.data));
}