如何使用react-native-firebase将自定义图像添加到iOS中的通知中

Question

我想使用 firebase 云消息传递中的数据有效负载在通知中显示图像。该图像被指定为托管该图像的网站的 URL。

看起来我想要做的是将图像添加为附件，请参阅下面的第 8 行。然而，除了应用程序图标之外，不存在任何图像。

const notification = new firebase.notifications.Notification()
        .setNotificationId("notification_id")
        .setTitle(notification.data.title)
        .setBody(notification.data.body)
        .setData({ url: notification.data.url })
        .ios.setLaunchImage(notification.data.icon)
        .android.setBigPicture(notification.data.icon)
        .ios.addAttachment("some_id", notification.data.icon, {});

问题是没有任何错误消息可以帮助我。通知按预期显示标题和正文，但不存在图像。从我能读到的文档来看，我想做的事情是可能的。

Answer 1

简而言之，iOS 上的 React-Native 不支持“丰富的推送通知”，即带有图像的通知。

更长的答案是，如果您添加一些快速代码，向反应本机项目添加对图像的支持是相当简单的。

解决办法：

打开您的 xcode 项目并转到“编辑器”->“添加目标...”。选择名为“通知服务扩展”的“应用程序扩展”。

您可以将其命名为任何您想要的名称，但如果您使用的是 CocoaPods，请确保选择正确的项目。

创建后将其内容替换为override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void)：

      self.contentHandler = contentHandler
      bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
      
      // get the variables that is needed later.
      guard let bestAttemptContent = bestAttemptContent,
        let attachmentURLAsString = bestAttemptContent.userInfo["icon"] as? String, 
      // "icon" is the key for the image url in the notification. It 
      // could be named whatever you want.
        let attachmentURL = URL(string: attachmentURLAsString) else {
          return
      }
      
      // call a custom function to download the image before attaching
      // it to the notification and presenting it.
      downloadImageFrom(url: attachmentURL) { (attachment) in
        if let attachment = attachment {
          bestAttemptContent.attachments = [attachment]
          contentHandler(bestAttemptContent)
        }
        
      }

然后downloadImageFrom需要创建函数：

  private func downloadImageFrom(url: URL, with completionHandler: @escaping (UNNotificationAttachment?) -> Void) {
    let task = URLSession.shared.downloadTask(with: url) { (downloadedUrl, response, error) in
      
      //verify that a url exists.
      guard let downloadedUrl = downloadedUrl else {
        completionHandler(nil)
        return
      }
      
      // create a local unique filepath.
      var urlPath = URL(fileURLWithPath: NSTemporaryDirectory())
      let uniqueURLEnding = ProcessInfo.processInfo.globallyUniqueString + ".png"
      urlPath = urlPath.appendingPathComponent(uniqueURLEnding)
      
      // fetch the image from the url
      try? FileManager.default.moveItem(at: downloadedUrl, to: urlPath)
      
      // if successful, return the image as an attachment.
      do {
        let attachment = try UNNotificationAttachment(identifier: "picture", url: urlPath, options: nil)
        completionHandler(attachment)
      } catch {
        completionHandler(nil)
      }
    }
    task.resume()
  }

当您构建应用程序时，它将使用此代码来加载通知。

发送通知时，您必须记住包含“图标”值。发送通知所需内容的示例：

    "notification": {
        "body": "body",
        "title": "title"
        "mutable_content": true // this row is required for the notification to work!
    },
    "data": {
        "icon":"https://pusher.com/static_logos/320x320.png", // change to your image url.
    },