Einrichtung von App-Push-Benachrichtigungen in Flutter mit PushEngage

Das PushEngage Flutter SDK erleichtert die Integration von Push-Benachrichtigungen in Ihre Flutter-Anwendungen und bietet nahtlose Kompatibilität mit Android- und iOS-Plattformen.

Diese Anleitung führt Sie durch die Schritte zur Einrichtung des PushEngage Flutter SDK und zur Aktivierung von Push-Benachrichtigungen auf Ihren Android- und iOS-Apps.

Bevor Sie beginnen

Hier ist eine Liste der Dinge, die Sie benötigen würden

• Ein Flutter-Projekt & PushEngage-Konto. Wenn Sie kein Konto haben, können Sie sich hier anmelden.
• Firebase-Konto mit eingerichteter Firebase Cloud Messaging (FCM) für Android.
• Ein Apple Developer-Konto zur Konfiguration von Apple Push Notification (APN)-Diensten für iOS.

Installation

1. Öffnen Sie Ihr Flutter-Projekt in Ihrem Code-Editor.

2. Fügen Sie die folgende Abhängigkeit in Ihre pubspec.yaml Datei: hinzu

dependencies:
	pushengage_flutter_sdk: ^0.0.1

3. Führen Sie den folgenden Befehl aus, um das Paket zu installieren.

dependencies:
flutter pub get

Android einrichten

Firebase Cloud Messaging (FCM) Einrichtung

Um Push-Benachrichtigungen für Android zu aktivieren, müssen Sie Firebase Cloud Messaging (FCM) konfigurieren:

1. Greifen Sie über Ihr Google-Konto auf die Firebase-Konsole zu.

2. Neues Projekt erstellen oder bestehendes Projekt auswählen: Klicken Sie auf „Projekt hinzufügen“, um ein neues Projekt zu erstellen, oder wählen Sie ein bestehendes Projekt aus Ihrer Liste aus. Wenn Sie ein bestehendes Projekt verwenden, fahren Sie direkt mit Schritt 4 fort.

3. Projektdetails eingeben: Geben Sie einen Namen für Ihr Projekt ein und klicken Sie auf Weiter. Schließen Sie den Einrichtungsvorgang ab, indem Sie auf dem letzten Bildschirm auf „Projekt erstellen“ klicken.

4. Android-App zum Projekt hinzufügen: Klicken Sie im Dashboard Ihres Firebase-Projekts auf das Android-Symbol, um eine Android-App hinzuzufügen.

5. Android-App konfigurieren: Geben Sie den Paketnamen Ihrer Android-App (zu finden in android/app/build.gradle unter dem Android-Block) ein und geben Sie einen App-Namen an. Klicken Sie auf Registrieren, wenn Sie fertig sind.

6. Konfigurationsdatei herunterladen: Laden Sie die Datei google-services.json herunter und legen Sie sie im Stammverzeichnis Ihres Android-App-Moduls unter android/app/ ab.

7. Service Account JSON generieren

• Klicken Sie in der Firebase-Konsole auf das Einstellungen-Symbol neben „Projektübersicht“ oben links und wählen Sie dann Projekteinstellungen.
• Navigieren Sie zur Registerkarte Dienstkonten.
• Klicken Sie auf Neuen privaten Schlüssel generieren und laden Sie die .json-Datei herunter.
• Bewahren Sie diese Datei sicher auf, da Sie sie für die Einrichtung des PushEngage-Dashboards benötigen.

8. Sender-ID abrufen

• Klicken Sie in der Firebase-Konsole auf das Einstellungen-Symbol neben Projektübersicht oben links und wählen Sie „Projekteinstellungen“.
• Wählen Sie die Registerkarte Cloud Messaging. Hier finden Sie die Sender-ID, die für die Initialisierung des PushEngage SDK benötigt wird.

FCM in das PushEngage-Dashboard integrieren

Um FCM-Details nahtlos in das PushEngage-Dashboard zu integrieren, befolgen Sie die unten aufgeführten Schritte:

1. Greifen Sie auf Ihr PushEngage-Konto zu, indem Sie sich mit Ihren Anmeldedaten anmelden.

2. Navigieren Sie zu Einstellungen » Installation und wählen Sie dann den Tab Android SDK

4. Konfigurieren Sie nun die FCM-Einstellungen

• Geben Sie Ihre Firebase Sender ID ein (abgerufen aus der Firebase Console).
• Laden Sie die Service Account JSON-Datei hoch (heruntergeladen von Firebase).
• Klicken Sie auf die Schaltfläche Aktualisieren, um diese Einstellungen zu speichern.

5. App-ID kopieren: Nach der Konfiguration der FCM-Einstellungen erhalten Sie eine App-ID. Kopieren Sie diese App-ID, da sie zur Initialisierung des PushEngage Android SDK in Ihrer Flutter-App benötigt wird.

Einrichtung von iOS

Projekt einrichten

Wir bitten Sie, die folgenden Schritte nach dem Öffnen Ihres Projekts zu befolgen.

So öffnen Sie ein Projekt: your_project_name » iOS » Runner.xcworkspace.

1. Remote-Benachrichtigungen aktivieren

• Öffnen Sie Ihr Xcode-Projekt und wählen Sie das Stammprojekt im Projektnavigator aus.
• Wählen Sie Ihr Haupt-App-Ziel aus.
• Navigieren Sie zu „Signing & Capabilities.“
• Stellen Sie sicher, dass die Berechtigung Background Modes hinzugefügt wurde. Wenn nicht, fügen Sie sie hinzu, indem Sie auf die Schaltfläche „+ Capability“ klicken.
• Stellen Sie auf ähnliche Weise sicher, dass die Push-Benachrichtigungsberechtigung hinzugefügt wurde. Wenn nicht, fügen Sie sie mit der Schaltfläche „+ Capability“ hinzu.

Wenn die Berechtigung „Push-Benachrichtigungen“ in Xcode nicht sichtbar ist:

• Gehen Sie zu Ihrem Apple Developer-Konto.
• Navigieren Sie zu „Zertifikate, Identifikatoren & Profile.“. Wählen Sie Ihren App-Identifikator aus.
• Bearbeiten Sie die Konfiguration Ihrer App-ID und stellen Sie sicher, dass Push-Benachrichtigungen aktiviert sind.
• Kehren Sie zu Xcode zurück und versuchen Sie, die Berechtigung Push-Benachrichtigungen erneut hinzuzufügen.

2. Hintergrundmodi aktivieren

• Navigieren Sie in Ihrem Xcode-Projekt zu „Signing & Capabilities.“
• Aktivieren Sie unter „Background Modes“ sowohl „Remote notifications“ als auch „Background fetch.“
• Dieser Schritt stellt sicher, dass Ihre App Remote-Benachrichtigungen und Hintergrundabrufe effizient verarbeiten kann.

Wenn Sie kein APN-Zertifikat für iOS haben, können Sie eines mit der Anleitung hier erstellen.

Als Nächstes müssen Sie nur für iOS eine Notification Service Extension und eine Notification Content Extension hinzufügen.

Erstellen einer Notification Service Extension

Die Notification Service Extension erweitert die Fähigkeit Ihrer iOS-App, Benachrichtigungen zu empfangen. Sie wird verwendet, um den Inhalt der Benachrichtigung zu ändern oder Daten beim Empfang der Benachrichtigung abzurufen/zu verarbeiten. Befolgen Sie diese Schritte, um eine Notification Service Extension zu erstellen:

1. Öffnen Sie Xcode und navigieren Sie zu Ihrem Projekt.
2. Wählen Sie im Menü Datei » Neu » Ziel.
3. Wählen Sie im Fenster zur Vorlagenauswahl Notification Service Extension und klicken Sie auf Weiter.

4. Geben Sie Ihrer Erweiterung einen Namen, z. B. PushEngageNotificationServiceExtension, und klicken Sie auf Fertig stellen.

4. Geben Sie Ihrer Erweiterung einen Namen, z. B. PushEngageNotificationServiceExtension, und klicken Sie auf Fertig stellen.

5. Wenn Sie die Notification Service Extension erstellt haben, werden Sie möglicherweise aufgefordert, sie zu aktivieren. Aktivieren Sie sie nicht sofort. Das Aktivieren der Erweiterung würde den Debugging-Fokus von Xcode von Ihrer App auf die Erweiterung verlagern. Wenn Sie sie versehentlich aktivieren, machen Sie sich keine Sorgen; Sie können das Debugging Ihrer App in Xcode wieder aufnehmen.

6. Wählen Sie im Projektnavigator das oberste Projektverzeichnis aus und wählen Sie in der Zielliste, die in Schritt 4 erstellt wurde, das Ziel NotificationServiceExtension aus.

7. Setzen Sie das Bereitstellungsziel auf iOS 10 oder höher, da dies die iOS-Version ist, für die Apple die Unterstützung für diese Erweiterung eingeführt hat. 

Initialisierung des PushEngage SDK für Notification Service Extension

Um die ordnungsgemäße Funktion des PushEngage SDK in Ihrer iOS Notification Service Extension sicherzustellen, führen Sie die folgenden Schritte aus.

1. Öffnen Sie your_project_name » ios » Podfile.
2.  Fügen Sie Folgendes am Ende Ihrer Podfile hinzu:

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

3. Installieren Sie die Abhängigkeit:

Sie müssen nun den Befehl im iOS-Verzeichnis Ihres Projekts ausführen und den folgenden Befehl ausführen:

pod repo update 

pod install

4. Stellen Sie in Ihrem Notification Service Extension-Ziel sicher, dass Sie das PushEngage-Framework importieren und den erforderlichen Initialisierungscode hinzufügen. Hier erfahren Sie, wie Sie dies mit Swift tun können.

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)
        }
    }

}

Erstellung einer Notification Content Extension

Um die Art und Weise durch Hinzufügen einer benutzerdefinierten Benutzeroberfläche zu verbessern, müssen Sie eine Notification Content Extension erstellen. Befolgen Sie die nachstehenden Schritte, um die Erweiterung einzurichten:

1. Gehen Sie in Xcode zu Datei » Neu » Ziel.
2. Wählen Sie Notification Content Extension und klicken Sie auf Weiter.

3. Wählen Sie im Dialogfeld, das nach dem Klicken auf Fertig stellen erscheint, nicht „Aktivieren“. Das Abbrechen bewirkt, dass Xcode Ihre App anstelle der Erweiterung debuggt. Wenn Sie sie versehentlich aktivieren, wechseln Sie in Xcode zurück zum Debuggen Ihrer App (neben der Schaltfläche Ausführen).

4. Wählen Sie im Projektnavigator das oberste Projektverzeichnis aus und wählen Sie in der Zielliste, die in Schritt 2 erstellt wurde, das Ziel NotificationContentExtension aus.

5. Setzen Sie das Bereitstellungsziel auf iOS 10 oder höher, da dies die iOS-Version ist, für die Apple die Unterstützung für diese Erweiterung eingeführt hat. 

Initialisierung des PushEngage SDK für Notification Content Extension

Um die ordnungsgemäße Funktion des PushEngage SDK in Ihrer iOS Notification Content Extension sicherzustellen, befolgen Sie diese Schritte:

Öffnen Sie your_project_name » iOS » Podfile.

Fügen Sie Folgendes am Ende Ihrer Podfile hinzu:

target 'Your_Notification_Content_Extension_Name' do
  use_frameworks!
  pod 'PushEngage', '0.0.4'
end

1. Abhängigkeit installieren: Hier ist der Code, den Sie in Ihrer Befehlszeile ausführen müssen.

e

pod repo update 
pod install

2. Stellen Sie in Ihrer Notification Content Extension-Zielsetzung sicher, dass Sie das PushEngage-Framework importieren und den erforderlichen Initialisierungscode hinzufügen. Hier erfahren Sie, wie Sie dies mit einigen Beispielen von UI-Elementen mit Swift tun können.

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!)
}
        }
    }
}

App-Gruppen hinzufügen

App-Gruppen sind unerlässlich, um die Kommunikation zwischen der Haupt-App, der Benachrichtigungsdienst-Erweiterung und der Benachrichtigungsinhalts-Erweiterung zu ermöglichen. Befolgen Sie diese Schritte, um Ihrem iOS-Projekt App-Gruppen hinzuzufügen:

Wenn Sie bereits eine App-Gruppe haben und nur diese verwenden möchten, fahren Sie mit Schritt 4 fort.

1. Wählen Sie in Ihrem Xcode-Projekt im Projektnavigator das oberste Verzeichnis des Projekts und dann das Hauptziel der App aus.
2. Navigieren Sie zur Registerkarte Signing & Capabilities.
3. Klicken Sie auf die Schaltfläche „+ Capability“ und wählen Sie App Groups aus der Liste aus.

4. Klicken Sie auf die Schaltfläche +, um eine App-Gruppe hinzuzufügen.

5. Fügen Sie Ihrer App-Gruppe einen eindeutigen Namen hinzu und klicken Sie auf OK.

6. Wählen Sie im Haupteditorbereich das Hauptziel Ihrer App aus. Wenn Sie eine App-Gruppe erstellt haben, geben Sie den Namen der Gruppe in der Info.plist Ihrer Anwendung mit dem Schlüssel PushEngage_App_Group_Key an.

7. Fügen Sie denselben Schlüssel und Wert in die Info.plist-Datei der Benachrichtigungsdienst-Erweiterung ein.

8. Stellen Sie sicher, dass Sie dieselbe App-Gruppe sowohl im Hauptanwendungsziel als auch in Ihrer Benachrichtigungsdienst-Erweiterung auswählen.

PushEngage SDK initialisieren

Initialisieren Sie in Ihrer main.dart-Datei das PushEngage SDK.

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(),
    );
  }
}

In Ihrer AppDelegate.swift der iOS-App

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)
    }
}

DeepLink-Verarbeitung

Ein deepLinkStream ist etwas, das Deep-Link-Daten emittiert. 

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

Das ist alles, Sie haben nun erfolgreich das Flutter SDK für Android & iOS App integriert.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte, indem Sie hier klicken. Unser Support-Team wird Ihnen helfen können.