javascript - TypeError:messaging.getToken 不是函数
问题描述
因此,我正在开发一个 firebase 云消息传递 Web 应用程序并收到错误消息:
Error: TypeError: messaging.getToken is not a function
我尝试了很多来解决它,也在谷歌上搜索过,但没有运气。如果有人可以帮助我,我将不胜感激。
相同的代码在官方谷歌示例中运行良好。下面是我收到此错误的行:
return messaging.getToken();
<head>
<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>
<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"
};
window.addEventListener("click", (e) => {
switch (e.target.id) {
case "btnPermissions":
initFirebaseMessagingRegistration();
break;
}
});
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
const messaging = getMessaging(app);
function initFirebaseMessagingRegistration() {
Notification.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);
});
// 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.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);
});
});
console.log("clicked");
}
</script>
</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 id="btnPermissions">Enable Firebase Messaging</button>
</main>
</body>
</html>
解决方案
明白了,我也必须导入 getToken 方法。下面是我应该写的新片段:
import { getMessaging, getToken } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";
代替:
import { getMessaging } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";
推荐阅读
- android - 在Android中与文本对齐
- jquery - 如何在 Jquery Typeahead 的结果列表底部添加帮助文本?
- javascript - 如何在单个表中迭代多个状态
- firebase - 如何分配uid?
- python - 如果使用 Go 执行 python 脚本,则无法打印中文
- excel - 移动或另存为 .xlsm 文件会破坏宏
- javascript - 如何将“onClick”函数传递给 React 中的子组件
- python - 将不使用某台机器的惩罚成本引入 ORTools Job Shop 问题
- jsonschema - JSON 模式中的常见类型限制
- android - react-native-sqllite 值未显示