如何更改 Web 应用程序中的 FCM 推送通知图标答案

【问题标题】：How to change FCM push notification icon in web apps如何更改 Web 应用程序中的 FCM 推送通知图标
【发布时间】：2020-12-13 18:59:23
【问题描述】：

我正在通过 firebase 通知管理器发送 FCM 通知。但是通知图标没有选项。所以默认情况下它显示 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;

【问题讨论】：

标签： reactjs firebase firebase-cloud-messaging