こんにちは、ミツモアのエンジニアの@teradonburiです。今年もアドベントカレンダーの季節になりましたね。弊社ミツモアでは、Expoでモバイルアプリを開発しています。今回はExpoのiOS Simulatorでプッシュ通知を手軽に受信する方法を紹介します。プッシュ送信側はExpoが公式でテスト送信ツールを用意してはくれています。

しかし、iOSは実機でプッシュ受信テストするためにはProvision Profileやアプリ証明書をなどを端末にインストールする必要があり、デバッグが非常に大変です。今回紹介するiOS Simulatorを使うことで手軽にプッシュ受信側のテストを行うことができるようになります。

テスト用.apnsファイル作成

テストプッシュ送信用の.apns 拡張子のファイルを作成します。（xxx.apnsなどファイル名は何でも良いです） APNSファイルはプッシュサーバがモバイルアプリに送信する際のファイルフォーマットです。

{
    "Simulator Target Bundle": "com.meetsmore.pro",
    "aps": {
        "alert": {
            "title": "タイトル",
            "body": "詳細"
        },
        "mutable-content": 1,
        "content-available": 1,
        "sound": "default"
    },
    "body": {
        "type": "proMoreWorker",
        "link": "https://xxx.com"
    }
}

それぞれのフィールドに以下を指定します。

Simulator Target Bundle: iOSアプリのbundle id
aps
- alert.title: プッシュ通知のタイトル
- alert.message: プッシュ通知のメッセージ
- sound: プッシュ通知の受信音
body: 任意カスタムパラメータ

APNSファイルフォーマットの詳細はApple Developerのドキュメントにあります。

developer.apple.com

Expo用カスタムパラメータ

プッシュ通知にカスタムパラメータを受け取り、アプリ内で画面遷移する実装はよくあると思います。（ディープリンク）

ただ、bodyのカスタムパラメータをどうハンドリングするかはアプリ受信側に委ねられています。

この辺のドキュメントはExpo公式でも書いていなかったのでExpo SDKのネイティブ実装を直接調べてみました。

Expo SDK内のネイティブ実装を見るとEXNotificationSerializer.mにて bodyのパラメータがnotification.request.content.data に格納されることがわかりました。

github.com

+ (NSDictionary *)serializedNotificationData:(UNNotificationRequest *)request
{
  BOOL isRemote = [request.trigger isKindOfClass:[UNPushNotificationTrigger class]];
  return isRemote ? request.content.userInfo[@"body"] : request.content.userInfo;
}

serializedContent[@"data"] = [self serializedNotificationData:request] ?: [NSNull null];

ネイティブ側で受信したデータはExpo SDKの Notifications.addNotificationResponseReceivedListener に notificationResponse.notification.request.content.data のパラメータとして送信されてきます。

docs.expo.dev

あとはdataの中身からlinkパラメータを受け取ってディープリンクをアプリ側でハンドリングすればよいだけです。

    Notifications.addNotificationResponseReceivedListener((notificationResponse: Notifications.NotificationResponse) => {
      const data = notificationResponse.notification.request.content.data as NotificationData;