chrome (macOS) 不显示桌面推送通知

Posted

技术标签:

【中文标题】chrome (macOS) 不显示桌面推送通知【英文标题】:Desktop push notifications not displayed for chrome (macOs) 【发布时间】:2019-03-19 05:53:43 【问题描述】:

我已将基于 FCM 的推送通知集成到我的 Angular 应用程序中,推送通知会在 ubuntu 和 Windows 设备上触发,但无法在 macOS 上运行。我附上了 firebase-messaging-sw.js 的代码:

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

firebase.initializeApp(
    'messagingSenderId': SENDER_ID
);

self.addEventListener('fetch', event => 
    event.waitUntil(async function() 
        // Exit early if we don't have access to the client.
        // Eg, if it's cross-origin.
        if (!event.clientId) return;

        // Get the client.
        const client = await clients.get(event.clientId);
        // Exit early if we don't get the client.
        // Eg, if it closed.
        if (!client) return;

        // Send a message to the client.
        self.clients.matchAll().then(function(clients) 
            clients.forEach(function(client) 
                client.postMessage(
                    msg: "Hey I just got a fetch from you!",
                    url: event.request.url
                );
            );
        );

    ());
)

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) 
    // Customize notification here
    const notificationTitle = 'Background Message Title';
    const notificationOptions = 
        body: 'Background Message body.',
        icon: '/firebase-logo.png'
    ;

    return self.registration.showNotification(notificationTitle,
        notificationOptions);
);

我们是否必须添加任何额外的配置来添加对 macOS Chrome 的支持?

【问题讨论】:

嘿。您是否找到任何适用于 mac OS 的解决方案? 【参考方案1】:

对于在您的 Mac 上没有收到推送通知的任何人,请确保您已在系统偏好设置 -> 通知 -> Chrome 中启用 Chrome 通知

即使我只是简单地从 Firebase 教程中复制和粘贴代码,我也一直在努力解决这个问题 :)

【讨论】:

【参考方案2】:

根据您发送通知的方式,您可能不需要执行任何额外的消息传递事件处理,并且因为您正在添加显式侦听器,这可能是它不起作用的原因。我的firebase-messaging-sw.js 文件看起来像这样

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.6.1/firebase-messaging.js');

firebase.initializeApp(
  messagingSenderId: 'SENDER_ID_HEREE',
);

firebase.messaging();

发送通知时,您只需使用服务器上的 firebase admin sdk 发送这样的有效负载。 Firebase 处理所有其他事情

var admin = require("firebase-admin");
// This is a specific account key file generated through the firebase UI
var serviceAccount = require("./serviceAccountKey.json");

admin.initializeApp(
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "*DATABASE_URL*"
);
const payload = 
  "token": "*DEVICE_TOKEN_HERE",

  "notification": 
    "title": "Test Title!",
    "body": "Test Body."
  ,
  "webpush": 
    "fcm_options": 
        "link": "*URL_TO_GO_TO_ON_NOTIFICATION_CLICK*"
    ,
    "notification": 
      "icon": "*image to show in the notification ( this path is relative to the site that is displaying the web notification )*"
    
  

admin.messaging().send(payload).then(res => 
  console.log('SUCCESS ', res)
).catch(err => 
  console.log('uh roh ', err)
)

【讨论】:

以上是关于chrome (macOS) 不显示桌面推送通知的主要内容,如果未能解决你的问题,请参考以下文章

FCM(Firebase 云消息传递):Firebase 推送通知在 Firefox 中显示,但在 Chrome 中不显示

Laravel 推送通知桌面(chrome 或 firefox)

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

在 MacOS 中网络推送没有声音

如何在移动设备上发送推送通知(Android Chrome)PWA

我如何在 Angular 应用程序中订阅/收听 chrome 推送通知