Как изменить значок push-уведомления FCM в веб-приложениях

#reactjs #firebase #firebase-cloud-messaging

#reactjs #firebase #firebase-облако-обмен сообщениями

Вопрос:

Я отправляю уведомления FCM через firebase notification manager.Но для значка уведомления нет опции.Итак, по умолчанию он показывает chrome.Мое веб-приложение создано с использованием reactjs. Как изменить этот значок?

Это мой файл firebase-serviceworker:

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

firebase.initializeApp({
  messagingSenderId: "343676937800",
  apiKey: "AIzaSyDCiXqVCawu6OPsvc87lPWqxoDIZ36RKmQ",
  appId: "1:343676937800:web:ab233c9b1b935ed9439a7d",
  projectId: "fcm-push-notify-bb24d",
});

const initMessaging = firebase.messaging();

  

App.js

 import React, { useEffect } from "react";
import "./App.css";
import firebase from "./firebase";

function App() {
  useEffect(() => {
    const messaging = firebase.messaging();
    messaging
      .requestPermission()
      .then(() => {
        console.log("permission granted");
        return messaging.getToken();
      })
      .then((token) => {
        console.log(token);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return <h2>Hello World</h2>;
}

export default App;

  

Комментарии:

1. У меня такая же проблема. Как вы это решили?

Ответ №1:

Используется setBackgroundMessageHandler для обработки настроенного набора значков.

https://github.com/firebase/quickstart-js/blob/b2f18e87b240868dd45ca141a328f8778b6de612/messaging/firebase-messaging-sw.js#L46-L57

Комментарии:

1. При этом будет отображаться 2 уведомления, потому что Google FCM автоматически отображает одно.