Облачный обмен сообщениями Firebase onMessage не запускается в приложении React даже после отправки сообщения

Question

Я тестирую функцию Firebase Cloud Messaging в моем приложении React, которое было загружено с помощью create-реагировать-приложение.Обратите внимание, что я уже инициализировал firebase (включая административный SDK на стороне сервера) должным образом, и моя сторона клиента развернута по протоколу https.До сих пор я делал следующее:

1. Инициализирую обмен сообщениями firebase в firebase.js, а также запрашиваю разрешение на уведомление и прослушиваю событие onMessage

const messaging = firebase.messaging();
messaging
  .requestPermission()
  .then(() => {
    console.log("Permission granted!");
  })
  .catch(() => {
    console.log("Permission denied!");
  });

messaging.onMessage(payload => {
  console.log("onMessage: ", payload);
});

Создание служебного файла firebase-messaging-sw.js в общедоступном каталоге

importScripts("https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js");

var config = {
  messagingSenderId: <messageID hidden>
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

Я прочитал из другого поста Stackoverflow, что в посте create-реагировать-приложение это также необходимо включить в index.js

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("../firebase-messaging-sw.js")
    .then(function(registration) {
      console.log("Registration successful, scope is:", registration.scope);
    })
    .catch(function(err) {
      console.log("Service worker registration failed, error:", err);
    });
}

Чтобы легко проверить сообщения, я добавил в Main.js кнопку, которая отправит на мой сервер токен по щелчку (а затем сервер продолжит отправку сообщения)

const handlePushButtonClick = () => {
    messaging.getToken().then(token => {
      axios.post(<Server link hidden>, {
        token
      });
    });
  };

Затем я настроил необходимый маршрут на моем экспресс-сервере следующим образом:

app.post("/api/push", async (req, res) => {
    const registrationToken = req.body.token;
    var message = {
      data: {
        score: "850",
        time: "2:45"
      },
      token: registrationToken
    };
    fb.admin
      .messaging()
      .send(message)
      .then(response => {
        console.log("Successfully sent message:", response);
        res.sendStatus(200);
      })
      .catch(error => {
        console.log("Error sending message:", error);
      });
  });

Вот проблема, я подтвердил, что мой сервер успешно получает токен и фактически успешно отправилно на стороне клиента я вообще не получаю объект полезной нагрузки onMessage.

Напомним, из моего кода, что я ожидаю получить на своей консоли разработчика на стороне клиента это console.log с onMessage и полезной нагрузкой.

messaging.onMessage(payload => {
  console.log("onMessage: ", payload);
});

Answer 1

Я понял свою ошибку.Первоначально я следовал этому руководству: https://firebase.google.com/docs/cloud-messaging/js/topic-messaging. Моя ошибка ранее была не очень ясна для меня, когда я следовал учебному пособию, но это, вероятно, потому, что я совершенно незнаком с уведомлениями и веб-API push-уведомлений.

Объект сообщения учебника содержал внутри себя объект данных:

var message = {
  data: {
    score: '850',
    time: '2:45'
  },
  token: registrationToken
};

Оказывается, что если я хотел отправить полезную информацию в сообщении, мне нужно было включить эту группу кода вмой firebase-messaging-sw.js (этот бит не был показан в уроке, на который я ссылался):

messaging.setBackgroundMessageHandler(payload => {
  const title = payload.data.title;
  const options = {
    body: payload.data.score
  };
  return self.registration.showNotification(title, options);
});

Обратите внимание, что приведенный выше код в файле сервисного работника необходим, только если вы хотите отправитьполезная нагрузка данных (которую вы можете после этого гибко манипулировать в файле рабочего сервиса).Если все, что вам нужно, это отправить уведомление, ваш объект сообщения должен вместо этого просто включать объект уведомления (который может принимать только некоторые фиксированные ключи):

var message = {
  notification: {
    title: '850',
    body: '2:45'
  },
  token: registrationToken
};