Make PUSH notifications with images in Firebase Cloud Messaging

You can easily send PUSH notifications using Firebase Cloud Messaging. At that time, you can also attach an image like this.

• Borrower of sample images https://picsum.photos/

There is also an Official Documentation on how to implement it. Since it was written in Objective-C, I wrote the sample code for Swift.

Overview

The sender of the PUSH notification will give you the image URL. The image itself is not included in the PUSH notification.

• It seems that this is done so that large data is not included in PUSH notifications.

After receiving the PUSH notification on the iPhone It seems to download the image from the URL in it.

The Notification Service app extension is used for this part after it reaches the iPhone side. Notification Service app extension is a function that can be processed after receiving a PUSH notification. However, you don't have to think too much because Firebase Cloud Messaging handles the detailed processing.

Notification Service app extension

First, let's get acquainted with the basics of Notification Service app extension. Let's get an overview in this article.

[iOS 10] Edit the payload of remote notification using Notification Service app extension #wwdc

Notification Service app extension is not just a function to display images It is important to have the image of processing after receiving all PUSH notifications.

Implementation

Let's actually implement it. Please create NotificationService.swift by referring to the previous article.

Implement based on Official documentation.

Firebase is doing only the next line Other than the following lines, the initial generation code of NotificationService.swift is fine.

[[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];

If you change this to Swift ...

Messaging.serviceExtension().populateNotificationContent(bestAttemptContent, withContentHandler: contentHandler)

It will be.

The final code looks like this:

//
//  NotificationService.swift
//  NotificationService
//
//  Created by yoneapp on 2020/11/07.
//

import UserNotifications
import Firebase

class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        
        if let bestAttemptContent = bestAttemptContent {
            // Modify the notification content here...
            bestAttemptContent.title = "\(bestAttemptContent.title) [modified]"
            
            Messaging.serviceExtension().populateNotificationContent(bestAttemptContent, withContentHandler: contentHandler)
        }
    }
    
    override func serviceExtensionTimeWillExpire() {
        // Called just before the extension will be terminated by the system.
        // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
            contentHandler(bestAttemptContent)
        }
    }

}

Because the Notification Service app extension has more targets Don't forget to add the Firebase library to your podfile. Describe the pod for each schema as follows.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'ImagePushSample' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for ImagePushSample
  pod 'Firebase/Analytics'
  pod 'Firebase/Messaging'
  
  target 'ImagePushSampleTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'ImagePushSampleUITests' do
    # Pods for testing
  end
end

target 'NotificationService' do
  use_frameworks!

  pod 'Firebase/Analytics'
  pod 'Firebase/Messaging'
end

Operation check

When checking the operation, from the Firebase management screen like this Confirm by sending a PUSH notification with the image URL.