web-dev-qa-db-fra.com

Comment afficher une image dans la notification Push ios?

iOS 10 introduit les mises à jour du cadre de notification Push,

UserNotificationsUI.framework

Comme indiqué sur Apple docs, il nous permet de personnaliser l’apparence des notifications locales et distantes lorsqu'elles apparaissent sur le périphérique de l’utilisateur.

Donc, si quelqu'un a une idée sur la façon d'afficher une image dans la notification Push lorsque l'écran est verrouillé. comme le font les notifications andorid.

Merci,

iospush-notificationapple-push-notificationsios10
44
Parth Pandya

Si vous souhaitez personnaliser l'apparence des notifications locales et distantes, procédez comme suit:

  1. Créez un UNNotificationCategory et ajoutez-le à la catégorie UNUserNotificationCenter:

    let newCategory = UNNotificationCategory(identifier: "newCategory",
                                         actions: [ action ],
                                         minimalActions: [ action ],
                                         intentIdentifiers: [],
                                         options: [])

let center = UNUserNotificationCenter.current()

center.setNotificationCategories([newCategory])

  2. Créez une UNNotificationContentExtension:

enter image description here

utilisez ensuite du code ou un scénario pour personnaliser votre UIViewController.

  1. Ajoutez une catégorie au pliste de UNNotificationContentExtension:

enter image description here

4. Notification Push

Notification locale

Créez un UNMutableNotificationContent et réglez le categoryIdentifier sur "newCategory" qui inclut les catégories de UNUserNotificationCenter et le plist de UNNotificationContentExtension:

let content = UNMutableNotificationContent()
content.title = ...
content.body = ...
content.categoryIdentifier = "newCategory"

let request = UNNotificationRequest.init(identifier: "newNotificationRequest", content: content, trigger: nil)

let center = UNUserNotificationCenter.current()
center.add(request)

Notification à distance

Ensemble "mutable-content : 1" et "category : newCategory". Notez que la valeur de la catégorie est définie sur "newCategory", ce qui correspond à ce que vous avez précédemment ajouté à la pliste UNUserNotificationCenter et UNNotificationContentExtensions.

Exemple:

 {
    "aps" : {
        "alert" : {
        "title" : "title",
        "body" : "Your message Here"
        },
        "mutable-content" : "1",
        "category" : "newCategory"
    },
    "otherCustomURL" : "http://www.xxx.jpg"
 }
  1. Remarque: vous avez besoin d’un appareil ou d’un simulateur prenant en charge 3DTouch, sinon vous ne pouvez pas afficher un contrôleur de vue personnalisé UNNotificationContentExtension. （Sous iOS10 Bêta1, cela ne fonctionne pas. Mais maintenant, ce travail sans contact 3D

Et ... si vous souhaitez simplement afficher une image dans une notification Push affichée sur l'écran de verrouillage, vous devez ajouter UNNotificationAttachment:

let content = UNMutableNotificationContent()
content.title = ...
content.body = ...
content.categoryIdentifier = "newCategory"

let fileURL: URL = ... //  your disk file url, support image, audio, movie

let attachement = try? UNNotificationAttachment(identifier: "attachment", url: fileURL, options: nil)
content.attachments = [attachement!]

let request = UNNotificationRequest.init(identifier: "newNotificationRequest", content: content, trigger: nil)

let center = UNUserNotificationCenter.current()
center.add(request)

enter image description here

Pour plus de détails, Demo

80
maquannene

En fait, si vous configurez une notification locale et que vous souhaitez simplement qu'une image apparaisse dans la notification elle-même, vous n'avez pas à vous soucier de NotificationsUI.framework ou UNNotificationContentExtensions. Cela n’est utile que si vous souhaitez une interface utilisateur personnalisée lorsque l’utilisateur 3D touche ou développe la notification.

Pour ajouter une image déjà présente sur le périphérique (soit livrée avec l'application, soit générée/stockée par l'application à un moment donné avant la création de la notification), il vous suffit d'ajouter un UNNotificationAttachment avec une URL de fichier où le chemin se termine. dans .png (ou .jpg fonctionnera probablement aussi?). Quelque chose comme ça:

UNMutableNotificationContent *content = [UNMutableNotificationContent new];
content.title = @"Title";
content.body = @"Body";
content.sound = [UNNotificationSound defaultSound];
NSURL *imageURL = [NSURL URLWithString:@"file:/some/path/in/app/image.png"];
NSError *error;
UNNotificationAttachment *icon = [UNNotificationAttachment attachmentWithIdentifier:@"image" URL:imageURL options:nil error:&error];
if (error)
{
    NSLog(@"error while storing image attachment in notification: %@", error);
}
if (icon)
{
    content.attachments = @[icon];
}

Ensuite, lorsque la notification apparaît, l'image apparaîtra à droite de la bannière de notification, comme pour les notifications de messages. Et vous n'avez pas besoin de parcourir toutes les étapes de la configuration d'une extension de contenu avec un identifiant de catégorie, etc.

EDIT: mise à jour pour ajouter qu'il ne s'agit que d'une solution valide pour les notifications locales.

10
Greg G

Vous devez travailler sur la création de notifications Push et également lorsque vous les manipulez.

  1. Lorsque vous créez une charge, vous devez ajouter une pièce jointe à un attribut, comme ci-dessous:

    {        
    aps : {
        alert: { },
        mutable-content:1
    }
    my-attachment = "url to resource"
}

  2. Lorsque vous recevez notification, le système appelle la méthode didReceive de l'extension de service, remplacez l'extension de notification didReceive comme ceci

    public func didReceive(_ request:UNNotificationRequest, withContentHandler contentHandler:(UNNotificatinContent) -> Void) {
    let fileUrl = //
    let attachment = UNNotificationAttachment(identifier : "image", url: fileUrl, options: nil)
    let content = request.content.mutableCopy as! UNMutableNotificationContent
    content.attachment = [attachment]
    contentHandler(content)
}

Here est le vidéoconférence WWDC sur ce sujet.

4
Adnan Aftab