Это действительно раздражает меня после того, как я потратил на такую простую вещь два дня:
Я пытаюсь внедрить Push-уведомления в веб-браузере FCM и несколько раз просматривал документы Google, а также смотрел все официальные видео на YouTube. Получить токен действительно легко, но по какой-то причине он падает в JS-коде Firebase.
Вот мой код HTML / JS здесь:
<html>
<head>
<title>Web Push Test 2</title>
<script src="/vendors/jquery/dist/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase-messaging.js"></script>
</head>
<body>
<button type="button" id="subscribe">Subscribe</button><br />
<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
<script>
var config = {
apiKey: "AIzaSyBgYGotOm09UkhERqVPriV1XNhymxracno",
authDomain: "******-b6f9c.firebaseapp.com",
databaseURL: "https://******-b6f9c.firebaseio.com",
projectId: "*******-b6f9c",
storageBucket: "******-b6f9c.appspot.com",
messagingSenderId: "333638181210"
};
firebase.initializeApp(config);
if ('Notification' in window) {
console.log("Notification is in window.");
var messaging = firebase.messaging();
messaging.usePublicVapidKey("BE0MvVZ0zyTYGmeNIdj4A8XZZ50OKaZL90xmXbIVfufcMuPb0lAUC99426aBPrAEPHAWYeMbOTpHbcM3OiySEcs");
messaging.onMessage(function(payload) {
console.log("Message received. ", payload);
});
messaging.onTokenRefresh(function() {
messaging.getToken().then(function(refreshedToken) {
console.log('Token refreshed.');
setTokenSentToServer(false);
sendTokenToServer(refreshedToken);
}).catch(function(err) {
console.log('Unable to retrieve refreshed token ', err);
showToken('Unable to retrieve refreshed token ', err);
});
});
if (Notification.permission === 'granted') {
console.log("Permission is granded.");
subscribe();
}
$('#subscribe').on('click', function () {
console.log("Subscribe fired.");
subscribe();
});
}
function subscribe() {
messaging.requestPermission().then(function() {
console.log('Notification permission granted.');
messaging.getToken().then(function(currentToken) {
if (currentToken) {
sendTokenToServer(currentToken);
} else {
console.log('No Instance ID token available. Request permission to generate one.');
setTokenSentToServer(false);
}
}).catch(function(err) {
console.log('An error occurred while retrieving token. ', err);
showToken('Error retrieving Instance ID token. ', err);
setTokenSentToServer(false);
});
}).catch(function(err) {
console.log('Unable to get permission to notify.', err);
});
}
window.is_sentToServer = false
function setTokenSentToServer(sent) {
window.is_sentToServer = sent
}
function showToken(currentToken) {
console.log('Token: '+currentToken);
}
function sendTokenToServer(currentToken) {
$.post('/?c=push&a=save_subscription', {token: currentToken}, function(data){
console.log('Token added...');
setTokenSentToServer(true);
});
}
</script>
</body>
Когда я запускаю страницу, я получаю следующую ошибку:
An error occurred while retrieving token. TypeError: Cannot read property 'buffer' of undefined
И точка сбоя FireBase JS здесь:
https://www.gstatic.com/firebasejs/messaging/dist/index.esm.js
function isTokenStillValid(pushSubscription, publicVapidKey, tokenDetails) {
if (!isArrayBufferEqual(publicVapidKey.buffer, tokenDetails.vapidKey.buffer)) {
return false;
}
var isEndpointEqual = pushSubscription.endpoint === tokenDetails.endpoint;
var isAuthEqual = isArrayBufferEqual(pushSubscription.getKey('auth'), tokenDetails.auth);
var isP256dhEqual = isArrayBufferEqual(pushSubscription.getKey('p256dh'), tokenDetails.p256dh);
return isEndpointEqual && isAuthEqual && isP256dhEqual;
}
Итак, насколько я могу понять, переменная tokenDetails.vapidKey не определена, поэтому она не может прочитать размер буфера, но возникает вопрос - почему?
Я дважды проверил, что все мои предоставленные ключи действительны, но не могу понять, что здесь может быть не так ...
Большое спасибо всем, кто мог бы помочь мне с этим
Я запускаю этот тест на localhost, как показано в оригинальном учебном пособии YouTube, и я не забыл создать firebase-messaging-sq.js, который выглядит следующим образом:
// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/4.13.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.13.0/firebase-messaging.js');
var config = {
apiKey: "AIzaSyBgYGotOm09UkhERqVPriV1XNhymxracno",
authDomain: "*****-b6f9c.firebaseapp.com",
databaseURL: "https://******-b6f9c.firebaseio.com",
projectId: "*******-b6f9c",
storageBucket: "*****-b6f9c.appspot.com",
messagingSenderId: "333638181210"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.usePublicVapidKey("BE0MvVZ0zyTYGmeNIdj4A8XZZ50OKaZL90xmXbIVfufcMuPb0lAUC99426aBPrAEPHAWYeMbOTpHbcM3OiySEcs");
messaging.setBackgroundMessageHandler(function (payload) {
console.log('Handling background message ', payload);
return self.registration.showNotification(payload.notification.title, {
body: payload.notification.body
});
});