“Super-notifications” – Ajouter des actions aux notifications avec Flutter

Introduction

Les notifications simples sont un bon moyen placer des informations d’une application à la vue de l’utilisateur. Mais qu’est-ce qu’il serait pratique d’interagir avec elles sans perdre du temps à démarrer l’application et naviguer jusqu’à l’écran concerné ! Nous explorerons les possibilités offertes dans le contexte crossplatform Flutter en intégrant des éléments interactifs aux notifications.

‍

‍

Contenu

Dans un projet Flutter si les notifications ne sont pas développées de façon native, plusieurs librairies peuvent se charger de cette tâche. Parmi elles flutter_local_notifications est largement utilisée et très stable. Seul problème, elle ne répond pas à la problématique simplement parce qu’elle ne permet pas l’ajout d’actions / éléments interactifs. De même pour le service Firecloud Messaging de Firebase.

Le package awesome_notifications est une alternative qui quant à elle propose quelques suppléments.

Ce package permet de créer des notifications locales en les “améliorant” à l’aide de boutons d’action, d’images, de sons et bien d’autres composants. La disposition d’éléments à l’intérieur de la notification est également hautement personnalisable et hybride !

‍

‍

Notification lorsque l’application est déjà ouverte

Cas pratique :

Dans une application de jeu, je reçois une notification m’invitant à ouvrir un cadeau avec un aperçu. En acceptant de l’ouvrir par un clic sur le bouton “Oui”, j’effectue l’action d’ouverture du cadeau et je suis redirigé vers la page du cadeau ouvert. Si je clique sur “Non”, une action pour retirer le cadeau est effectuée dans l’application, mais l’application ne s’ouvre pas au premier plan. En cliquant sur la notification, j’ouvre simplement l’application.

Pour commencer, il faut mettre en place les groupements de notifications et leurs personnalisations, ici nous n’en n’aurons qu’un :

1  static Future<void> initializeLocalNotifications() async {
2    await AwesomeNotifications().initialize(
3        null, //'resource://drawable/res_app_icon',//
4        [
5          NotificationChannel(
6              channelKey: 'alerts',
7              channelName: 'Communauté',
8              channelDescription: 'Communauté hybride',
9              playSound: true,
10              onlyAlertOnce: true,
11              groupAlertBehavior: GroupAlertBehavior.Children,
12              importance: NotificationImportance.Max,
13              defaultPrivacy: NotificationPrivacy.Private,
14              defaultColor: Colors.indigo,
15              enableVibration: true,
16              enableLights: true,
17              vibrationPattern: highVibrationPattern,
18              ledColor: Colors.green)
19        ],
20        debug: true);
21  }

‍

Il faut aussi initialiser les boutons d’actions qui seront ensuite utilisés dans les notifications, ici le bouton qui permettra d’accepter le cadeau. L’application redirigera sur une page spécifique de l’application avec l’action en tant qu’argument :

1  @pragma('vm:entry-point')
2  static Future onActionReceivedMethod(ReceivedAction receivedAction) async {
3    if (receivedAction.actionType == ActionType.SilentAction || receivedAction.actionType == ActionType.SilentBackgroundAction) {
4      // For background actions, you must hold the execution until the end
5      print('Message sent via notification input: "${receivedAction.buttonKeyInput}"');
6      await executeLongTaskInBackground();
7    } else {
8        App.navigatorKey.currentState?.pushNamedAndRemoveUntil(
9          '/notification-page', 
10          (route) => (route.settings.name != '/notification-page') || route.isFirst,
11          arguments: receivedAction
12        );
13    }
14  }

‍

Et voici la structure de la notification qui apparaîtra :

1  static Future createNewNotification() async {
2    bool isAllowed = await AwesomeNotifications().isNotificationAllowed();
3    if (!isAllowed) isAllowed = await displayNotificationRationale();
4    if (!isAllowed) return;
5
6    await AwesomeNotifications().createNotification(
7        content: NotificationContent(
8            id: -1, // -1 is replaced by a random number
9            channelKey: 'alerts',
10            title: 'Ici le titre de la notification',
11            body: 'Le corps de la notification',
12            bigPicture: 'https://d29fhpw069ctt2.cloudfront.net/clipart/112330/preview/secretlondon_Green_present_preview_5a7c.png',
13            // largeIcon: 'https://d29fhpw069ctt2.cloudfront.net/clipart/112330/preview/secretlondon_Green_present_preview_5a7c.png',
14            notificationLayout: NotificationLayout.BigPicture,
15            payload: {'notificationId': '1234567890'}),
16        actionButtons: [
17          NotificationActionButton(
18            key: 'YES', 
19            label: 'Oui',
20            actionType: ActionType.KeepOnTop  
21          ),
22          NotificationActionButton(
23            key: 'DISMISS', 
24            label: 'Non', 
25            isDangerousOption: true,
26            actionType: ActionType.DismissAction,
27            ),
28        ]);
29  }

‍

Remarquez le type de notification (channelKey), le titre, le texte, l’image et les types d’actions sur les boutons.

Notez qu’il est nécessaire de demander la permission de réception de notification sur Android 13 & iOS.

Pour notre test, la notification est appelée au clic d’un bouton dans l’application.

Cela donne le résultat suivant :

‍

Article super notifications flutter

Il existe une multitude d’actions et de paramètres pour les notifications, elles sont toutes référencées sur la page pub.dev du package: awesome_notifications | Flutter Package.

‍

‍

Notification lorsque l’application est en arrière-plan ou fermée

Pour réaliser des notifications push, c’est-à-dire des notifications qui apparaissent lorsque l’application n’est pas ouverte, nous utilisons Firecloud Messaging. Le problème qui se pose maintenant : Est-ce qu’il est possible de recevoir des notifications push avec tous les atouts proposés par awesome_notifications ?

C’est ce que permet de faire l’addition à notre package d’awesome_notification_fcm, il remplace le package firebase_messaging.

A l’aide de ce package nous pouvons à présent réceptionner les notifications push améliorées par Awesome Notifications.

La mise en place demande une connexion au service Firebase sur l’application, un serveur “back-end” pour envoyer des instructions à Firebase (pour les tests, de simples appels d’API suffiront) et de récupérer le push token de son téléphone pour lui envoyer les notifications.

Awesome Notification va se charger de lire le message que l’on a envoyé via notre serveur; ce message contient notre notification avec ses nouveaux composants.

Exemple basique de notification avec les boutons d’actions :

1 {
2     "to" : "LE-TOKEN-DE-MON-TELEPHONE",
3     "priority": "high",
4     "mutable_content": true,
5     "notification": {
6         "badge": 42,
7         "title": "Bonjour !",
8         "body": "Vous avez reçu un cadeau aujourd'hui"
9     },
10     "data" : {
11         "content": {
12             "id": 1,
13             "badge": 42,
14             "channelKey": "alerts",
15             "displayOnForeground": true,
16             "notificationLayout": "BigPicture",
17             "bigPicture": "https://d29fhpw069ctt2.cloudfront.net/clipart/112330/preview/secretlondon_Green_present_preview_5a7c.png",
18             "showWhen": true,
19             "autoDismissible": true,
20             "privacy": "Private",
21             "payload": {
22                 "notificationId": "1234567890"
23             }
24         },
25         "actionButtons": [
26             {
27                 "key": "YES",
28                 "label": "Redirect",
29                 "autoDismissible": true
30             },
31             {
32                 "key": "DISMISS",
33                 "label": "Non",
34                 "actionType": "DismissAction",
35                 "autoDismissible": true
36             }
37         ]
38     }
39 }

Le code est très similaire à la notification qui a été initialisée dans le code de notre application.

Bien-sûr, il est possible de faire encore plus, tous les paramètres sont sur cette page.

Note: Contrairement à awesome_notification, awesome_notification_fcm n’est pas gratuit, il demande une licence de 10€ par application pour mise en production.

‍

‍

Conclusion

La solution awesome_notifications a bien répondu au besoin de création de notifications avec action. La simplicité de la mise en œuvre particulièrement et les possibilités de personnalisation sont impressionnantes et nous évitent la manipulation des deep links et permettent une gestion hybride avec un seul code.

Il faut cependant tenir compte du statut “en développement” dans le cas de l’adoption de la librairie. L’éditeur affiche un niveau de complétude de 100% pour la plateforme Android, 96% pour iOS. Pour le moment pas de couverture pour les autres plateformes, cela arrivera plus tard.

‍

‍

Vous souhaitez en savoir plus ? Contactez-nous !

‍

‍

‍

Vincent LEBRAS – Développeur Mobile
Samuel EBEBENGE – Développeur Mobile
Luc ALLARDIN – Développeur Mobile