[iOS 10] User Notifications framework を使用して通知にファイルを添付する

[iOS 10] User Notifications framework を使用して通知にファイルを添付する

Clock Icon2016.09.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。モバイルアプリサービス部の平屋です。前回の記事に引き続き、iOS 10 で追加された「User Notifications framework」のクラスを使用した実装を紹介します。

本記事では、通知にファイルを添付する方法を紹介します。

user-notifications-framework-15-1

添付可能なファイルの形式

通知に添付することができるファイルは、オーディオ、画像、ムービーです。添付可能なファイルの形式や最大ファイルサイズは以下のページにまとめられています。

実装

それでは、通知にファイルを添付する方法を解説していきます。

ローカル通知

ローカル通知の場合、通知作成時にファイルを添付することができます。ローカル通知の作成の基本事項については、第1回目の記事をご参照ください。

通知にファイルを添付するために必要な作業は、UNNotificationAttachment オブジェクトを作成し UNMutableNotificationContentattachments プロパティにセットすることだけです。

実装例

// UNMutableNotificationContent を作成
let content = UNMutableNotificationContent()
content.title = "Hey guys"
content.body = "What's going on here?"

let imageURL = Bundle.main.url(forResource: "image",
                               withExtension: "jpg")

// UNNotificationAttachment を作成し、content の attachments プロパティにセット
do {
    let attachment = try UNNotificationAttachment(identifier: "SampleAttachment",
                                                  url: imageURL!,
                                                  options: nil)
    content.attachments = [attachment]
} catch  {
    print("attachment error!")
}

// UNTimeIntervalNotificationTrigger, UNNotificationRequest を作成し、UNUserNotificationCenter に追加
let trigger = UNTimeIntervalNotificationTrigger.init(timeInterval: 5,
                                                     repeats: false)
let request = UNNotificationRequest.init(identifier: "NotificationWithAttachment",
                                         content: content,
                                         trigger: trigger)
UNUserNotificationCenter.current().add(request)

リモート通知

リモート通知にファイルを添付するために必要な作業は以下の通りです。

  • APNs に送信するペイロードの中に、指定のキー・値を含めるようにする
  • 「Notification Service app extension」を実装する

「Notification Service app extension」の基本事項については、第13回目の記事をご参照ください。

APNs に送信するペイロードの例

ペイロードの中に以下のキー・値を含めるようにします。

  • aps ディクショナリの中で mutable-content: 1 を指定
    • Notification Service app extension でリモート通知を編集するために必要
  • ルートのディクショナリの中で <任意のキー>: <画像の URL> を指定
    • 以下の例でのキー名は image-url
{
    "aps": {
        "alert": {
            "title": "AdvancedNotifications",
            "subtitle": "Session708",
            "body": "3DTouch on Notifications provides users with access to media attachments and live content"
        },
        "mutable-content": 1
    },
    "image-url": "https://unsplash.it/300/300?image=11"
}

Notification Service app extension の実装例

UNNotificationServiceExtension のサブクラスの didReceive(_:withContentHandler:) メソッド内で以下の処理を行うようにします。

  • ペイロードから画像の URL を取り出す
  • 画像をダウンロードし、ローカルのストレージに画像を格納
  • UNNotificationAttachment オブジェクトを作成し UNMutableNotificationContentattachments プロパティにセットする
    • これはローカル通知の場合と同じ
  • 編集後の UNMutableNotificationContent を contentHandler に渡す
class NotificationService: UNNotificationServiceExtension {
    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        content = request.content.mutableCopy() as! UNMutableNotificationContent

        // content.userInfo から画像 URL を取り出す
        // 画像をダウンロードし、ローカルのストレージに画像を格納
        // 画像ファイルのローカル URL を取得

        let fileURL = // ...

        // UNNotificationAttachment を作成し、content の attachments プロパティにセット
        do {
            let attachment = try UNNotificationAttachment(identifier: "SampleAttachment",
                                                          url: imageURL!,
                                                          options: nil)
            content.attachments = [attachment]
        } catch  {
            print("make attachment error!")
        }

        // 編集後の UNMutableNotificationContent を contentHandler に渡す
        contentHandler(content)
    }

    // ...
}

動作結果

画像を添付した通知を受信すると、以下のように通知バナーの右端に画像のサムネイルが表示されます。

user-notifications-framework-15-1

通知バナーをプレス (3D Touch 対応機種の場合) または下方向へドラッグすると、通知の表示領域が広がり、画像を拡大表示することができます。

user-notifications-framework-15-2

さいごに

本記事では、通知にファイルを添付する方法を紹介しました。

添付ファイル付きの通知の送信を実装する際の参考になれば幸いです!

参考資料

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.