Angular 在后台显示推送通知

Question

我收到了 firebase 通知，我想在后台将它们显示为弹出通知(当用户在不同的选项卡上时)。

在我的 firebase-messaging-sw.js 中，我尝试了两种不同的方法，它们都是 console.log() 有效载荷，没关系，但是后台没有弹出通知。

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
      body : 'Background Message body.',
      icon : '/firebase-logo.png'
  };

  return self.registration.showNotification(notificationTitle,
      notificationOptions);
});

和

messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

我也尝试过降级 firebase，但没有成功。那么，如何显示弹出窗口？

Answer 1

我发布这个问题已经有很长时间了，所以我不记得到底是什么问题，但它现在有效，所以我会把解决方案留在这里。我在某处看到了这个解决方案，但我不记得在哪里。如果我找到它，我会提供引用。

const messaging = firebase.messaging.isSupported() ? firebase.messaging() : null;

if ('serviceWorker' in navigator) {
  console.log('Registering service worker...')
  navigator.serviceWorker.register('firebase-messaging-sw.js')
    .then(function (registration) {
      console.log('Service Worker Registered');
      console.log(registration)
    })
    .catch(function (err) {
      console.log('error', err)
    });

};

messaging.onBackgroundMessage((payload) => {
  self.clients.matchAll({
    type: 'window',
    includeUncontrolled: true
  }).then(function (clients) {
    clients.forEach(function (client) {
      client.postMessage(payload);
    });
  });

});

self.addEventListener('push', event => {
  const promiseChain = isClientFocused()
    .then((clientIsFocused) => {
      if (clientIsFocused) {
        console.log('Don\'t need to show a notification.');
        return;

      }

      // Client isn't focused, we need to show a notification.
      const messageFrom = event.data.json().data.event;

      const promiseNotify = registration.getNotifications()
      .then(notifications => {
        let currentNotification;
  
        for (let i = 0; i < notifications.length; i++) {
          console.log(notifications[i].data)
          if (notifications[i].data &&
            notifications[i].data.messageFrom === messageFrom) {
            currentNotification = notifications[i];
          }
        }
  
        return currentNotification;
      })
      .then((currentNotification) => {
        let notificationTitle;
        const options = {
          icon: './assets/img/logo.png'
        }
  
        if (currentNotification) {
          // We have an open notification, let's do something with it.
          const messageCount = currentNotification.data.newMessageCount + 1;
          let body = '';
          switch (messageFrom) {
            case NotificationEvent.VEHICLE_IMPORTED:
              body = `${messageCount} vehicles has finished importing.`;
              break;
            // create cases if needed  
          }
          options.body = body;
          options.data = {
            messageFrom: messageFrom,
            newMessageCount: messageCount
          };
          notificationTitle = `New Images`;
  
          // Remember to close the old notification.
          currentNotification.close();
        } else {
          let body = '';
          switch (messageFrom) {
            case NotificationEvent.VEHICLE_IMPORTED:
              body = 'Vehicle has finished importing.'
              break;
            // create cases if needed
          }
          options.body = body;
          options.data = {
            messageFrom: messageFrom,
            newMessageCount: 1
          };
          notificationTitle = `Catch`;
        }
  
        return registration.showNotification(
          notificationTitle,
          options
        );
      });
      return promiseNotify
    });


  event.waitUntil(promiseChain);
})

function isClientFocused() {
  return clients.matchAll({
    type: 'window',
    includeUncontrolled: true
  }).then((windowClients) => {
    let clientIsFocused = false;

    for (let i = 0; i < windowClients.length; i++) {
      const windowClient = windowClients[i];
      if (windowClient.focused) {
        clientIsFocused = true;
        break;
      }
    }

    return clientIsFocused;
  });
}