带有 Base64 的 Web 推送通知图标 [英] Web push notification icon with Base64

问题描述

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

I have implemented a service worker using Workbox library. For web push notification we are using FCM via WebPush (https://github.com/web-push-libs/web-push-csharp)

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

Now what I want is to send a dynamic push notification icon. Icons are saved in a database in base64 format. When I try to send a push from server side using WebPush its throwing an exception: "Bad Request".

那么是否可以使用 Base64 代替图像 URL?

So is it possible to used Base64 instead of image URL?

在谷歌的开发者页面上提到某些浏览器可能需要通过 HTTPS 提供图像."所以，这是问题吗?

On google's developer page it mentionss that "some browsers may require the image be served over HTTPS." So, is that the problem?

我尝试通过 webPush 将 base64 发送到 FCM.它没有用.

I have tried to send base64 to FCM via webPush. It didn't work.

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

If I hard code the icon with base64 it works.

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
}

推荐答案

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

We can't use base64 with push notification as FCM document stats that push message size can't exceed 4 KB.

为了解决这个问题，我创建了一个 api 并用 Api url 替换了图像路径.在服务器端，我从 DB 中检索了 base64 并转发了它.

To resolve this issue, I created an api and replaced image path with Api url. From server side I retrieved base64 from DB and forwarded and It worked.

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

这篇关于带有 Base64 的 Web 推送通知图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！