将 PWA 安装到主屏幕后，我的通知徽章图标未显示

Posted 2023-02-24

【中文标题】将 PWA 安装到主屏幕后，我的通知徽章图标未显示

【英文标题】：My notification badge icon is not showing after the PWA is installed to homescreen

【发布时间】：2018-08-14 07:10:08

【问题描述】：

我有一个能够接收推送通知的移动网站。 firebase-messaging-sw.js 上的一些代码如下，

 messaging.setBackgroundMessageHandler(function(payload) 
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  var notificationTitle = payload.data.title;
  var notificationOptions = 
    body: payload.data.body,
    icon: payload.data.icon,
    data: payload.data.click_action,
    badge: "icon url",
    image: payload.data.image,
    tag: payload.data.unique_id
  ;


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

当我在移动 Chrome 上允许通知时，通知会完美显示，我的自定义徽章徽标会显示在通知栏上。但是当我点击“添加到主屏幕”后，通知徽章图标变成了默认的钟形图标。为什么会这样，有什么办法可以改变吗？

谢谢。

【问题讨论】：

badge 的值似乎是一个字符串，确切地说是“icon url”。那应该是图标的完整路径 URL

【参考方案1】：

这是 Chrome 中的一个已知错误。他们已经修复了它in this commit。

该错误修复将于 9 月 4 日（明天）随 Chrome 69 一起推出。您可以在此处查看推出状态：https://www.chromestatus.com/features/schedule