如何使用 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 不支持“丰富的推送通知”，即带有图像的通知。

更长的答案是，如果您添加一点 swift 代码，那么在 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.
    },