javascript - 来自服务人员点击和图标的 FCM 消息 Chrome 推送通知将不起作用

标签 javascript google-chrome push-notification service-worker

此代码显示我的通知,一切正常,但在通知弹出窗口中我看不到图标,单击通知只是关闭它而不是打开窗口。我从中获得的这段代码(Google's tutorial)。

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

firebase.initializeApp({
    'messagingSenderId': 'my id'
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
    var title = '';
    var body = '';

    if(payload && payload.notification) {
        if(payload.notification.body) {
            body = payload.notification.body;

            if(payload.notification.title) {
                title = payload.notification.title;
            }
        }
    }

    return self.registration.showNotification(title, {
        body: body,
        icon: '/img/logos/logo-short-blue.png'
    });
});

self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    var appUrl = '/' + event.notification.data.actionUrl;

    event.waitUntil(clients.matchAll({
            includeUncontrolled: true,
            type: 'window'
        }).then( activeClients => {
            if (activeClients.length > 0) {
                activeClients[0].navigate(appUrl);
                activeClients[0].focus();
            } else {
                clients.openWindow(appUrl);
            }
        })
    );
});

最佳答案

您必须在服务器端使用 click_action 作为 url 和 icon 字段,同时形成推送消息的有效载荷。

关于javascript - 来自服务人员点击和图标的 FCM 消息 Chrome 推送通知将不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41720338/

相关文章:

javascript - 脚本没有正确接收 url

google-chrome - Chrome 56 移动版 addEventListener "click"不起作用

javascript - 如何在解析服务器上使用 kue 安排作业?

ios - 使用 Firebase 实现推送通知的最佳方式

android - 前台应用程序通知几乎是空的,后台应用程序收到通知但没有自定义数据

javascript - 使用 nodejs 、 express 和 mongoose 的 bluebird Promisies crud 示例

javascript - jquery将数组对象转换为字符串

javascript - 更改 jcrop 选择的大小

javascript - 令人困惑的 jQuery 行为

angularjs - 如何让 Protractor 接受浏览器本地摄像头