messaging.onMessage 不是函数

Question

我正在尝试创建一个 firebase 云消息传递网络应用程序并使用最新的 SDK。但是，我不知道为什么，但我的代码无法正常工作，并且出现以下错误： “messaging.onMessage”不是函数。如果我正在检查他们使用 firebase-messeging-compat.js 而不是常规 firebase-messaging.js 的官方 google 存储库，它工作正常，但不是我的代码。 https://github.com/firebase/quickstart-js/tree/master/messaging 有人可以帮我吗？

<!DOCTYPE html>
<html lang="en">

<head>
  <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
    import { getMessaging } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "AIzaSyDOVN1qOGzsD6AI-2jA05LpfQIJ5aoCuD4",
      authDomain: "clouding-aa740.firebaseapp.com",
      projectId: "clouding-aa740",
      storageBucket: "clouding-aa740.appspot.com",
      messagingSenderId: "1059589787087",
      appId: "1:1059589787087:web:cdd636057d2a921ccdd6ba",
      measurementId: "G-CD2BEK39LZ"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const messaging = getMessaging(app);
    function initFirebaseMessagingRegistration() {
      messaging
      .requestPermission()
      .then(function () {
        messageElement.innerHTML = "Got notification permission";
        console.log("Got notification permission");
        return messaging.getToken();
      })
      .then(function (token) {
        // print the token on the HTML page
        tokenElement.innerHTML = "Token is " + token;
      })
      .catch(function (err) {
        errorElement.innerHTML = "Error: " + err;
        console.log("Didn't get notification permission", err);
      });
    }
    messaging.onMessage(function (payload) {
      console.log("Message received. ", JSON.stringify(payload));
      notificationElement.innerHTML = notificationElement.innerHTML + " " + payload.data.notification;
    });
    messaging.onTokenRefresh(function () {
      messaging.getToken()
      .then(function (refreshedToken) {
        console.log('Token refreshed.');
        tokenElement.innerHTML = "Token is " + refreshedToken;
      }).catch(function (err) {
        errorElement.innerHTML = "Error: " + err;
        console.log('Unable to retrieve refreshed token ', err);
      });
    });

  </script>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clouding</title>
</head>

<body>
  <main>
    <h1>Welcome to Clouding</h1>
    <div id="token" style="color:lightblue"></div>
    <div id="message" style="color:lightblue"></div>
    <div id="notification" style="color:green"></div>
    <div id="error" style="color:red"></div>
    <script>
      messageElement      = document.getElementById("message")
      tokenElement        = document.getElementById("token")
      notificationElement = document.getElementById("notification")
      errorElement        = document.getElementById("error")
    </script>
    <button onclick="initFirebaseMessagingRegistration()">Enable Firebase Messaging</button>
  </main>
</body>
</html>

Answer 1

您使用的是旧语法，但未导入 compat 包。改变这个：

 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
    import { getMessaging } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";

对此：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics-compat.js";
    import { getMessaging } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging-compat.js";

这样您就可以导入 compat 包。但是您仍然在混合一些新旧 SDK。例如，您使用新 SDK 中的 getMessaging，但尝试使用 messaging.onMessage 什么是旧 SDK。

请问。如果你想使用新的或旧的SDK，请告诉我，我可以将整个代码重写为特定的SDK版本。

更新：

新语法代码：

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyDOVN1qOGzsD6AI-2jA05LpfQIJ5aoCuD4",
  authDomain: "clouding-aa740.firebaseapp.com",
  projectId: "clouding-aa740",
  storageBucket: "clouding-aa740.appspot.com",
  messagingSenderId: "1059589787087",
  appId: "1:1059589787087:web:cdd636057d2a921ccdd6ba",
  measurementId: "G-CD2BEK39LZ",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const messaging = getMessaging(app);

function initFirebaseMessagingRegistration() {
  // Don't forget your vapidKey here
  getToken(messaging, { vapidKey: "publicVapidKey" })
    .then((t) => {
      tokenElement.innerHTML = "Token is " + r;
    })
    .catch(function (err) {
      errorElement.innerHTML = "Error: " + err;
      console.log("Didn't get notification permission", err);
    });

  onMessage(messaging, (payload) => {
    console.log("Message received. ", JSON.stringify(payload));
    notificationElement.innerHTML =
      notificationElement.innerHTML + " " + payload.data.notification;
  });

messaging.onMessage 不是函数

messaging.onMessage is not a function

javascript

messaging

firebase

firebase-cloud-messaging