iOS10 で画像つきプッシュ通知を配信する方法

アプリ側の実装

1. Capabilities にて、Push Notifications を ON にします

App Extensions の設定

1. プロジェクトを開き、Targets を追加します（メニューから File => New => Target を選択する もしくは、xcodeprojから + ボタンを押す）

2. Notification Service Extension を選択します

product name は、任意の名前をつけます

scheme を Activate するかのダイアログがでるので、 Activate を選択します

scheme につけた名前のフォルダと、その中に NotificationService.h/.m と Info.plist が追加されます

3. App Extensions の証明書確認

アプリの証明書と App Extension の証明書が一致しているか確認してください

4. NotificationService.m の実装

didReceiveNotificationRequest に下記を記述してください

YOUR_CUSTOM_KEY は、配信時、カスタムフィールドで定義する任意のキーとなるため、変更が可能です

NSString* imageUrl = [request.content.userInfo objectForKey:@"YOUR_CUSTOM_KEY"]; 
if(imageUrl) {
    NSURLSession *session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]];
    NSURLSessionTask *task = [session dataTaskWithURL:[NSURL URLWithString:imageUrl] completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {      
        NSURL *writePath = [[NSURL fileURLWithPath:NSTemporaryDirectory()] URLByAppendingPathComponent:@"tmp.png"];
        [data writeToURL:writePath atomically:YES];
        UNNotificationAttachment *attachment = [UNNotificationAttachment attachmentWithIdentifier:@"GrowthbeatSample" URL:writePath options:nil error:nil];
        UNMutableNotificationContent *content = [request.content mutableCopy];
        content.attachments = @[attachment];
        
        self.contentHandler(content);
        
    }];
    [task resume];
} else {
    self.contentHandler(self.bestAttemptContent);
}

管理画面にて配信の設定

カスタムフィールドに下記 json を記述して配信設定を行ってください

{"aps":{"mutable-content":1},"YOUR_CUSTOM_KEY":"imageURL"}

配信対象はセグメントにて、  iOSのみ にすることを推奨します（OS別セグメント設定方法は「【おすすめセグメント】開封率が5%アップ！OS別セグメント」を参照）

注意点
・指定する画像は iOS の ATS 仕様に沿っている必要があります   
・"mutable-content":1 が必須です
・YOUR_CUSTOM_KEY はアプリの実装のキーと一致している必要があります

指定画像サイズ

iOS側で自動トレースされるため、画像にマージンを設ける必要があります

・70 × 70px 画像の場合 
表示アイコンサイズ 36 × 36px 左右上下マージン 18px 

・140 × 140px 画像の場合
表示アイコンサイズ 72 × 72px 左右上下マージン 34px 

配信イメージ