Remarque : Il n'y a pas de documentation héritée disponible pour cet élément, vous voyez donc la documentation actuelle.
Le SDK Flutter PushEngage facilite l’intégration des notifications push dans vos applications Flutter, offrant une compatibilité transparente avec les plateformes Android et iOS.
Ce guide vous guidera à travers les étapes de configuration du SDK Flutter PushEngage et d’activation des notifications push sur vos applications Android et iOS.
Avant de commencer
Voici une liste des éléments dont vous aurez besoin
- Un projet Flutter et un compte PushEngage. Si vous n’avez pas de compte, vous pouvez vous inscrire ici.
- Un compte Firebase avec la configuration de Firebase Cloud Messaging (FCM) pour Android.
- Un compte développeur Apple pour configurer les services Apple Push Notification (APN) pour iOS.
Installation
1. Ouvrez votre projet Flutter dans votre éditeur de code.
2. Ajoutez la dépendance suivante dans votre fichier pubspec.yaml :
dependencies:
pushengage_flutter_sdk: ^0.0.1
3. Exécutez la commande suivante pour installer le package.
dependencies:
flutter pub get
Configuration d’Android
Configuration de Firebase Cloud Messaging (FCM)
Pour activer les notifications push pour Android, vous devrez configurer Firebase Cloud Messaging (FCM) :
1. Accédez à la console Firebase en utilisant votre compte Google.
2. Créez un nouveau projet ou sélectionnez un projet existant : Cliquez sur « Ajouter un projet » pour créer un nouveau projet, ou sélectionnez un projet existant dans votre liste. Si vous utilisez un projet existant, passez directement à l’étape 4.
3. Entrez les détails du projet : Ajoutez un nom pour votre projet et cliquez sur Continuer. Terminez le processus de configuration en cliquant sur « Créer un projet » sur l’écran final.
4. Ajoutez une application Android au projet : Dans le tableau de bord de votre projet Firebase, cliquez sur l’icône Android pour ajouter une application Android.
5. Configurez l’application Android : Entrez le nom du package de votre application Android (trouvé dans android/app/build.gradle sous le bloc android) et fournissez un nom d’application. Cliquez sur Enregistrer une fois terminé.
6. Téléchargez le fichier de configuration : Téléchargez le fichier google-services.json et placez-le à la racine de votre module d’application Android dans android/app/
7. Générez un fichier JSON de compte de service
- Dans la console Firebase, cliquez sur l’icône Paramètres à côté de « Vue d’ensemble du projet » en haut à gauche, puis sélectionnez Paramètres du projet.
- Accédez à l’onglet Comptes de service.
- Cliquez sur Générer une nouvelle clé privée et téléchargez le fichier .json.
- Conservez ce fichier en lieu sûr car vous en aurez besoin pour la configuration du tableau de bord PushEngage.
8. Récupérez l’ID de l’expéditeur
- Dans la console Firebase, cliquez sur l’icône Paramètres à côté de Vue d’ensemble du projet en haut à gauche et sélectionnez « Paramètres du projet ».
- Sélectionnez l’onglet Cloud Messaging. Ici, vous trouverez l’ID de l’expéditeur, qui est nécessaire pour l’initialisation du SDK PushEngage.
Intégrer FCM avec le tableau de bord PushEngage
Pour intégrer de manière transparente les détails FCM avec le tableau de bord PushEngage, suivez les étapes décrites ci-dessous :
- Accédez à votre compte PushEngage en vous connectant avec vos identifiants.
- Accédez à Paramètres » Installation, puis choisissez l'onglet SDK Android
- Maintenant, Configurez les paramètres FCM
- Entrez votre Firebase Sender ID (récupéré depuis la console Firebase).
- Téléchargez le fichier JSON du compte de service (téléchargé depuis Firebase).
- Cliquez sur le bouton Mettre à jour pour enregistrer ces paramètres.
5. Copier l'ID de l'application : Après avoir configuré les paramètres FCM, un ID de l'application vous sera fourni. Copiez cet ID de l'application car il est nécessaire pour initialiser le SDK PushEngage Android dans votre application Flutter.
Configuration de iOS
Configuration du projet
Nous vous demandons de suivre les étapes ci-dessous après avoir ouvert votre projet.
Voici comment ouvrir un projet : votre_nom_de_projet » iOS » Runner.xcworkspace.
1. Activer les notifications à distance
- Ouvrez votre projet Xcode et sélectionnez le projet racine dans le navigateur de projet.
- Choisissez votre cible d'application principale.
- Accédez à « Signature & Capacités ».
- Assurez-vous que la capacité Modes d'arrière-plan est ajoutée. Sinon, ajoutez-la en cliquant sur le bouton « + Capacité ».
- De même, assurez-vous que la capacité Notifications Push est ajoutée. Sinon, ajoutez-la en utilisant le bouton « + Capacité ».
Si la capacité « Notifications Push » n'est pas visible dans Xcode :
- Accédez à votre compte développeur Apple.
- Accédez à « Certificats, Identifiants et Profils ». Sélectionnez l'identifiant de votre application.
- Modifiez la configuration de votre ID d'application et assurez-vous que les Notifications Push sont activées.
- Retournez dans Xcode et essayez d'ajouter à nouveau la capacité Notifications Push.
2. Activer les modes d'arrière-plan
- Dans votre projet Xcode, accédez à « Signature & Capacités ».
- Dans « Modes d'arrière-plan », activez à la fois « Notifications à distance » et « Récupération en arrière-plan ».
- Cette étape garantit que votre application peut gérer efficacement les notifications à distance et les récupérations en arrière-plan.
Si vous n'avez pas de certificat APN pour iOS, vous pouvez en créer un en suivant le guide ici.
Ensuite, vous devez ajouter une extension de service de notification et une extension de contenu de notification uniquement pour iOS.
Création de l'extension de service de notification
L'extension de service de notification améliore la capacité de votre application iOS à recevoir des notifications. Elle est utilisée pour modifier le contenu de la notification ou pour récupérer/traiter des données lors de la réception de la notification. Suivez ces étapes pour créer une extension de service de notification :
- Ouvrez Xcode et accédez à votre projet.
- Sélectionnez Fichier » Nouveau » Cible dans le menu.
- Dans la fenêtre de sélection du modèle, choisissez Notification Service Extension et cliquez sur Suivant.
4. Donnez un nom à votre extension, par exemple, PushEngageNotificationServiceExtension, et cliquez sur Terminer.
4. Donnez un nom à votre extension, par exemple, PushEngageNotificationServiceExtension, et cliquez sur Terminer.
5. Lorsque vous avez terminé la création de la Notification Service Extension, il se peut qu'on vous demande de l'activer. Ne l'activez pas immédiatement. L'activation de l'extension déplacerait le focus de débogage d'Xcode de votre application vers l'extension. Si vous l'activez par accident, ne vous inquiétez pas ; vous pouvez revenir au débogage de votre application dans Xcode.
6. Dans le navigateur de projet, sélectionnez le répertoire de projet de niveau supérieur et sélectionnez la cible NotificationServiceExtension dans le projet à partir de la liste des cibles créée à l'étape n° 4.
7. Définissez la Cible de déploiement sur iOS 10 ou supérieur, qui est la version d'iOS pour laquelle Apple a publié la prise en charge de cette extension.
Initialisation du SDK PushEngage pour Notification Service Extension
Pour assurer le bon fonctionnement du SDK PushEngage dans votre Notification Service Extension iOS, veuillez suivre les étapes ci-dessous
- Ouvrez votre_nom_de_projet » ios » Podfile.
- Ajoutez ce qui suit au bas de votre Podfile :
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
end
end
end
target 'Your_Notification_Service_Extension_Name' do
use_frameworks!
pod 'PushEngage', '~>0.0.4'
end
- Installez la dépendance :
Vous devez maintenant entrer la commande dans le répertoire iOS de votre projet et exécuter la commande suivante :
pod repo update
pod install
- Dans votre cible Notification Service Extension, assurez-vous d'importer le framework PushEngage et d'ajouter le code d'initialisation nécessaire. Voici comment vous pouvez le faire en utilisant Swift.
import UserNotifications
import PushEngage
@available(iOSApplicationExtension 10.0, *)
class PushEngageNotificationServiceExtension: UNNotificationServiceExtension {
var contentHandler: ((UNNotificationContent) -> Void)?
var bestAttemptContent: UNMutableNotificationContent?
var request : UNNotificationRequest?
override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
self.request = request
self.contentHandler = contentHandler
self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
if let bestContent = bestAttemptContent {
PushEngage.didReceiveNotificationExtensionRequest(request, bestContentHandler: bestContent)
contentHandler(bestContent)
}
}
override func serviceExtensionTimeWillExpire() {
// Called just before the extension will be terminated by the system.
// Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
if let contentHandler = contentHandler, let request = request ,let bestAttemptContent = bestAttemptContent {
guard let content = PushEngage.serviceExtensionTimeWillExpire(request, content: bestAttemptContent) else {
contentHandler(bestAttemptContent)
return
}
contentHandler(content)
}
}
}
Création de Notification Content Extension
Pour améliorer la façon dont vous ajoutez une interface utilisateur personnalisée, vous devrez créer une Notification Content Extension. Suivez les étapes ci-dessous pour configurer l'extension :
- Dans Xcode, allez à Fichier » Nouveau » Cible.
- Sélectionnez Notification Content Extension et cliquez sur Suivant.
3. Ne sélectionnez pas « Activer » dans la boîte de dialogue qui apparaît après avoir cliqué sur Terminer. L'annulation permet à Xcode de déboguer votre application au lieu de l'extension. Si vous l'activez accidentellement, revenez au débogage de votre application dans Xcode (à côté du bouton d'exécution).
4. Dans le navigateur de projet, sélectionnez le répertoire de projet de niveau supérieur et sélectionnez la cible NotificationContentExtension dans le projet à partir de la liste des cibles créée à l'étape n° 2.
5. Définissez la Cible de déploiement sur iOS 10 ou supérieur, qui est la version d'iOS pour laquelle Apple a publié la prise en charge de cette extension.
Initialisation du SDK PushEngage pour Notification Content Extension
Pour assurer le bon fonctionnement du SDK PushEngage dans votre Notification Content Extension iOS, suivez ces étapes :
Ouvrez votre_nom_de_projet » iOS » Podfile.
Ajoutez ce qui suit au bas de votre Podfile :
target 'Your_Notification_Content_Extension_Name' do
use_frameworks!
pod 'PushEngage', '0.0.4'
end
- Installer la dépendance : Voici le code que vous devez exécuter dans votre ligne de commande.
e
pod repo update
pod install
- Dans votre cible Notification Content Extension, assurez-vous d'importer le framework PushEngage et d'ajouter le code d'initialisation nécessaire. Voici comment vous pouvez le faire avec quelques exemples d'éléments d'interface utilisateur utilisant Swift.
import UIKit
import UserNotifications
import UserNotificationsUI
import PushEngage
@available(iOSApplicationExtension 10.0, *)
class NotificationViewController: UIViewController, UNNotificationContentExtension {
fileprivate var hostingView: UIHostingController<ContentView>?
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
}
func didReceive(_ notification: UNNotification) {
if(notification.request.content.categoryIdentifier == "your_identifier"){
let payLoad = PushEngage.getCustomUIPayLoad(for: notification.request)
//pass the payload to your custom View
let view = CustomView(payLoadInfo: payLoad)
hostingView = UIHostingController(rootView: view)
If let customView = self.hostingView {
addChild(hostingView!)
}
}
}
}
Ajouter des groupes d'applications
Les groupes d'applications sont essentiels pour permettre la communication entre l'application principale, l'extension de service de notification et l'extension de contenu de notification. Suivez ces étapes pour ajouter des groupes d'applications à votre projet iOS :
Si vous avez un groupe d'applications existant et que vous souhaitez uniquement l'utiliser, passez à l'étape n° 4.
- Dans votre projet Xcode, dans le navigateur de projet, sélectionnez le répertoire de projet de niveau supérieur et sélectionnez la cible principale de l'application.
- Accédez à l'onglet Signature & Capacités.
- Cliquez sur le bouton « + Capacité » et sélectionnez Groupes d'applications dans la liste.
4. Cliquez sur le bouton + pour ajouter un groupe d'applications.
5. Ajoutez un nom unique à votre groupe d'applications et cliquez sur OK.
6. Dans la zone d'édition principale, sélectionnez la cible principale de votre application. Si vous avez créé un groupe d'applications, fournissez le nom du groupe dans le fichier Info.plist de votre application avec la clé PushEngage_App_Group_Key.
7. Ajoutez la même clé et la même valeur dans le fichier Info.plist de l'extension de service de notification.
8. Assurez-vous de sélectionner le même groupe d'applications dans la cible de l'application principale et dans votre extension de service de notification.
Initialiser le SDK PushEngage
Dans votre fichier main.dart, initialisez le SDK PushEngage.
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
initPlatformState();
}
Future<void> initPlatformState() async {
PushEngage.setAppId("your_pushengage_app_id");
}
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'PushEngage',
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
Dans votre AppDelegate.swift de l'application iOS
import Flutter
import UIKit
import PushEngage
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override init() {
super.init()
PushEngage.swizzleInjection(isEnabled: true)
}
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
if #available(iOSApplicationExtension 10.0, *) {
UNUserNotificationCenter.current().delegate = self
}
GeneratedPluginRegistrant.register(with: self)
PushEngage.setBadgeCount(count: 0)
PushEngage.setNotificationWillShowInForegroundHandler { notification, completion in
if notification.contentAvailable == 1 {
// in case developer failed to set completion handler. After 25 sec handler will call.
completion(nil)
} else {
completion(notification)
}
}
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
Gestion des deepLinks
Un flux de deepLink est quelque chose qui émet des données de deepLink.
class Home extends StatefulWidget {
const Home({super.key});
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
late StreamSubscription _deepLinkSubscription;
@override
void initState() {
super.initState();
PushEngage.deepLinkStream.listen((data) {
_handleDeepLink(data);
});
}
void _handleDeepLink(Map<String, dynamic>? data) {
// Parse the deep link and navigate accordingly
Uri uri = Uri.parse(data?['deepLink']);
print('Path: ${uri.path}');
updateResponseText(data.toString());
switch (uri.path) {
case 'trigger':
case '/trigger':
print(‘your_implementation’)
break;
}
}
c
i
C'est tout, vous avez maintenant intégré avec succès le SDK Flutter pour les applications Android et iOS.
Si vous rencontrez des problèmes, veuillez nous contacter en cliquant ici. Notre équipe de support sera en mesure de vous aider.
