使用Base64的Web推送通知图标

Question

我使用Workbox库实现了一个服务工作者。对于Web推送通知，我们使用FCM通过WebPush进行通信（https://github.com/web-push-libs/web-push-csharp）。现在我想发送动态推送通知图标。这些图标以Base64格式保存在数据库中。当我尝试从服务器端使用WebPush发送推送时，它抛出异常：“Bad Request”。那么是否可以使用Base64代替图像URL？在Google的开发者页面上提到，“一些浏览器可能需要通过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
}

- Ashish Gehlot

Answer 1

由于FCM文档规定推送消息大小不能超过4 KB，因此我们无法在推送通知中使用base64。

为了解决这个问题，我创建了一个API，并用API URL替换了图像路径。从服务器端，我检索了来自数据库的base64并进行了转发，这样就解决了问题。

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

- Ashish Gehlot

Answer 2

确保图标尺寸更小。在我的情况下，使用72像素* 72像素的图标大小可以正常工作。不需要base64字符串。

- Parth Mansata