未触发 Firebase onMessage

Question

我在使用 firebase 推送通知时遇到问题。 onMessage 事件未触发

firebase-messaging-sw.js

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

firebase.initializeApp({
    apiKey: "some_data",
    authDomain: "some_data",
    databaseURL: "some_data",
    projectId: "some_data",
    storageBucket: "some_data",
    messagingSenderId: "some_data",
    appId: "some_data",
    measurementId: "some_data"
});

var messaging = firebase.messaging();

messaging.onMessage(function(payload) {
     console.log('Message received. ', payload);
 });

index.html

<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-messaging.js"></script>

<script>
    firebase.initializeApp({
        apiKey: "some_data",
        authDomain: "some_data",
        databaseURL: "some_data",
        projectId: "some_data",
        storageBucket: "some_data",
        messagingSenderId: "some_data",
        appId: "some_data",
        measurementId: "some_data"
    });

    if ('Notification' in window) {
        navigator.serviceWorker.register("js/firebase-messaging-sw.js")
        .then((registration) => {
            var messaging = firebase.messaging();
            messaging.useServiceWorker(registration);
            console.log(messaging);
            if (Notification.permission === 'granted') {
                subscribe(messaging);
                messaging.onMessage(function(payload) {
                     console.log('Message received. ', payload);
                 });
            }

            $('#subscribe').on('click', function () {
                subscribe(messaging);
            });
        });

    }

    function subscribe(messaging) {
        messaging.requestPermission()
            .then(function () {
                messaging.getToken()
                    .then(function (currentToken) {
                        console.log(currentToken);

                        if (currentToken) {
                            sendTokenToServer(currentToken);
                        }
                    })
                    .catch(function (err) {
                        setTokenSentToServer(false);
                    });
        })
        .catch(function (err) {
            console.warn('not granted', err);
        });
    }

    function sendTokenToServer(currentToken) {
        if (!isTokenSentToServer(currentToken)) {
            console.log('Отправка токена на сервер...');

            var url = '';
            $.post(url, {
                token: currentToken
            });

            setTokenSentToServer(currentToken);
        }
    }

    function isTokenSentToServer(currentToken) {
        return window.localStorage.getItem('sentFirebaseMessagingToken') == currentToken;
    }

    function setTokenSentToServer(currentToken) {
        window.localStorage.setItem(
            'sentFirebaseMessagingToken',
            currentToken ? currentToken : ''
        );
    }
</script>

我可以获取令牌并将其发送到服务器。但是当我从邮递员发送 请求时

https://fcm.googleapis.com/fcm/send
{
    "notification": {
        "title": "test",
        "body": "test",
        "click_action": "http://localhost:8001/"
    },
    "to": "token"
}

我在网页上什么也看不到，没有消息（邮递员的回复有 200 状态）

从 firebase 获取通知的正确方法是什么？或者我做错了什么？

Answer 1

首先，我对邮递员的要求并不完全正确。有两种类型的 firebase 请求，一种仅针对活动的浏览器选项卡，另一种可以在后台工作。我用的是第一个，所以看不到onMessage没有触发。

邮递员请求应该是

https://fcm.googleapis.com/fcm/send
{
    "data": {
        "title": "test",
        "body": "test",
        "click_action": "http://localhost:8001/"
    },
    "to": "token"
}

其次，在订阅和向服务器发送令牌之前，必须调用messaging.usePublicVapidKey()

最后一个messaging.onMessage也必须在发送token到服务器之前

未触发 Firebase onMessage

Firebase onMessage is not triggered

javascript

firebase

firebase-cloud-messaging