javascript - firebase.messaging.getToken() 在 Google Chrome 上无法按预期工作

Question

我试图确保每当我通过 messages.getToken() 请求时，我都能够从 firebase 获取 fcm 设备 token 。尽管我在 Google Chrome 上不断检索 token 时遇到问题，但它会间歇性地工作。

当我测试在 Firefox 上刷新页面时获取 FCM 设备 token 时，它每次都能正常工作，并且我在回调函数中收到了一个 token 。

另一方面，对于 Google Chrome，情况完全不同，我只能间歇性地收到 token 。我的代码在控制台中打印“已授予通知权限”时停止运行。 catch block 中没有错误消息。

经过进一步调查，我发现函数 messages.getToken() 不会返回 token ，即它是未定义的，同样，这只在我使用 Google Chrome 时才会发生。

我也尝试在 Brave 浏览器中执行此操作，其行为与 Google Chrome 类似，但在 Google Chrome 中，当我将以下代码粘贴到控制台时:

if(token){
console.log("value of token is:", token)
}
else
{
console.log("value of token is:", token);
}
});

它实际上打印了 token ，而 Brave 则没有。 当然，IE 和 Safari 不支持 Firebase 消息传递

代码

firebase-init.js:

var firebaseConfig = {
     apiKey: "api-key-here",
     authDomain: "domain-here",
     databaseURL: "data-base-url-here",
     projectId: "project-id",
     storageBucket: "storage-bucket",
     messagingSenderId: "sender-id-here",
     appId: "app-id-here"
 };
 console.log(firebase);
 firebase.initializeApp(firebaseConfig);
 const messaging = firebase.messaging();
 
 // Request for permission
         Notification.requestPermission()
             .then((permission) => {
                
                
                 console.log('Notification permission granted.');
                 console.log(permission);
             //code stops running here on google chrome
             messaging.getToken()
                     .then((currentToken) => {
                         if (currentToken) {
                             console.log('Token: ' + currentToken);
                             sendTokenToServer(currentToken);
                             var data = { newToken: currentToken };
                             var url = "/Account/UpdateFirebaseToken";
                             $.ajax({
                                 url: url,
                                 type: "POST",
                                 data: JSON.stringify(data),
                                 dataType: "text",
                                 processData: false,
                                 contentType: "application/json; charset=utf-8",
                                 success: function (data, status, jqXHR) {
                                     console.log("successfully retrieved token:", data, status, jqXHR);
                                 },
                                 error: function (jqXHR, status, err) {
                                     console.log(err);
                                 },
                                 complete: function (jqXHR, status) {
                                     console.log("request complete");
                                 }
                             });
                         } else {
                              //doesn't reach here
                             console.log('No Instance ID token available. Request permission to generate one.');
                             setTokenSentToServer(false);
                         }
                     })
                     .catch(function (err) {
                         //doesn't reach here either
                         console.log('An error occurred while retrieving token. ', err);
                         setTokenSentToServer(false);
                     });
             })
             .catch(function (err) {
                 console.log('Unable to get permission to notify.', err);
             });

    //});

firebase-messaging-sw.js:

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

var config = {
    apiKey: "api-key-here",
    authDomain: "auth-domain-here",
    messagingSenderId: "sender-id",
};
firebase.initializeApp(config);

var messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    var dataFromServer = JSON.parse(payload.data.notification);
    var notificationTitle = dataFromServer.title;
    var notificationOptions = {
        body: dataFromServer.body,
        icon: dataFromServer.icon,
        data: {
            url: dataFromServer.url
        }
    };
    return self.registration.showNotification(notificationTitle, notificationOptions);
});

self.addEventListener("notificationclick", function (event) {
    var urlToRedirect = event.notification.data.url;
    event.notification.close();
    event.waitUntil(self.clients.openWindow(urlToRedirect));
});

Answer 1

删除以下脚本标记:

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>

从我的 _Layout.cshtml 解决了这个问题。

我不确定该脚本如何干扰 promise ，但如果有人可以向我解释它，我将非常感激。