angular - 带有 Base64 的 Web 推送通知图标

Question

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

现在我想要的是发送动态推送通知图标。图标以 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
}

Answer 1

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

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

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