服务工作者中的 client.postMessage() 不会在 angularjs 控制器内调用 onmessage 处理程序

Question

Service Worker Message Handler:

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

Service Worker Notification Click Handler, Which sends data to 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 Controller with functions

Function to send message to service worker so that it stores this client

$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 function with onMessage handler

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");
    });
}

The problem is that onMessage Handler inside angularjs controller gets fired 90% of the times, but sometimes it does not. As I can see in the developer console, the execution stops in serviceworker.js after I print "sending 1" in the notification click handler, and does not show rest of the logs inside the controller's onMessage handler.

Answer 1

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)));
})

The listener is added on navigator.serviceWorker and not on a specific worker

AngularJs controller:

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