带有 Base64 的 Web 推送通知图标答案

【问题标题】：Web push notification icon with Base64带有 Base64 的 Web 推送通知图标
【发布时间】：2019-12-01 01:52:34
【问题描述】：

我已经使用 Workbox 库实现了一个服务工作者。对于网络推送通知，我们通过 WebPush (https://github.com/web-push-libs/web-push-csharp) 使用 FCM

现在我想要的是发送一个动态推送通知图标。图标以 base64 格式保存在数据库中。当我尝试使用 WebPush 从服务器端发送推送时，它会抛出异常：“错误请求”。

那么可以使用 Base64 代替图像 URL 吗？

在 google 的 developer page 上，它提到“某些浏览器可能需要通过 HTTPS 提供图像”。那么，这就是问题所在吗？

我尝试通过 webPush 将 base64 发送到 FCM。没用。

如果我用 base64 对图标进行硬编码，它就可以工作。

notificationData.icon = 'data:image/png;base64,iVBORw0KGg....'; //its working.

// PUSH NOTIFICATIONS Event
self.addEventListener('push', function(event) {
  console.log('[Service Worker]: Received push event', event)

  var notificationData = {}

  if (event.data.json()) {
    notificationData = event.data.json().notification // "notification node is specific for @angular/service-worker
  } else {
    notificationData = {
      title: 'Notification',
      message: 'You got notification',
      icon: './assets/imgs/notificationicon.jpg'
    }
  }
  notificationData.icon = notificationData.icon;
  self.registration.showNotification(notificationData.title, notificationData)
})

//Server Side WebPush
try {
  pushMessage.notification.icon = SystemInfo.Settings.NotificationIcon; // Base64 String
  _client.SendNotification(subscription.ToWebPushSubscription(), JsonConvert.SerializeObject(pushMessage), _vapidDetails);
} catch (WebPushException e) {
  _logger.Error(e.Message); // Bad Request
}

【问题讨论】：

标签： angular service-worker progressive-web-apps web-push workbox

【解决方案1】：

我们不能将 base64 与推送通知一起使用，因为推送消息大小不能超过 4 KB 的 FCM 文档统计信息。

为了解决这个问题，我创建了一个 api 并将图像路径替换为 Api url。从服务器端，我从数据库中检索 base64 并转发，它工作正常。

notificationData = {
  title: 'Notification',
  message: 'You got notification',
  icon: '/api/GetImage?id=notificationIcon'
}

【讨论】：

【解决方案2】：

确保图标尺寸更小。在我的例子中，它的图标大小为 72px * 72px。不需要base64 字符串。

【讨论】：