Let op: Er is geen bestaande documentatie beschikbaar voor dit item, dus u ziet de huidige documentatie.
Het PushEngage Flutter SDK maakt het eenvoudig om pushmeldingen te integreren in uw Flutter-applicaties, met naadloze compatibiliteit voor zowel Android- als iOS-platforms.
Deze handleiding leidt u door de stappen om de PushEngage Flutter SDK in te stellen en pushmeldingen in te schakelen voor uw Android- en iOS-apps.
Voordat u begint
Hier is een lijst met dingen die u nodig heeft
- Een Flutter-project & PushEngage-account. Als u geen account heeft, kunt u zich hier aanmelden.
- Firebase-account met Firebase Cloud Messaging (FCM) ingesteld voor Android.
- Een Apple Developer-account om Apple Push Notification (APN) services te configureren voor iOS.
Installatie
1. Open uw Flutter-project in uw code-editor.
2. Voeg de volgende afhankelijkheid toe aan uw pubspec.yaml-bestand:
dependencies:
pushengage_flutter_sdk: ^0.0.1
3. Voer het volgende commando uit om het pakket te installeren.
dependencies:
flutter pub get
Android instellen
Firebase Cloud Messaging (FCM) instellen
Om pushmeldingen voor Android in te schakelen, moet u Firebase Cloud Messaging (FCM) configureren:
1. Ga naar de Firebase console met uw Google-account.
2. Maak een nieuw project of selecteer een bestaand project: Klik op "Project toevoegen" om een nieuw project te maken, of selecteer een bestaand project uit uw lijst. Als u een bestaand project gebruikt, ga dan direct naar stap 4.
3. Voer projectgegevens in: Geef een naam op voor uw project en klik op Doorgaan. Voltooi het instelproces door op "Project maken" te klikken op het laatste scherm.
4. Voeg een Android-app toe aan het project: Klik in het dashboard van uw Firebase-project op het Android-pictogram om een Android-app toe te voegen.
5. Configureer Android-app: Voer de pakketnaam van uw Android-app in (te vinden in android/app/build.gradle onder het android-blok) en geef een app-naam op. Klik op Registreren wanneer u klaar bent.
6. Download configuratiebestand: Download het google-services.json-bestand en plaats het in de hoofdmap van uw Android-app-module op android/app/
7. Genereer Service Account JSON
- Klik in de Firebase console op het Instellingen-pictogram naast "Projectoverzicht" linksboven en selecteer Projectinstellingen.
- Navigeer naar het tabblad Serviceaccounts.
- Klik op Nieuwe privésleutel genereren en download het .json-bestand.
- Bewaar dit bestand veilig, want u heeft het nodig voor de instelling van het PushEngage-dashboard.
8. Verkrijg de Sender ID
- Klik in de Firebase console op het Instellingen-pictogram naast Projectoverzicht linksboven en selecteer "Projectinstellingen."
- Selecteer het tabblad Cloud Messaging. Hier vindt u de Sender ID, die nodig is voor de initialisatie van de PushEngage SDK.
FCM integreren met PushEngage Dashboard
Om FCM-gegevens naadloos te integreren met het PushEngage Dashboard, volgt u de onderstaande stappen:
- Ga naar uw PushEngage-account door in te loggen met uw gegevens.
- Navigeer naar Instellingen » Installatie en kies nu het tabblad Android SDK
- Configureer nu FCM-instellingen
- Voer uw Firebase Sender ID in (opgehaald uit de Firebase Console).
- Upload het Service Account JSON-bestand (gedownload van Firebase).
- Klik op de knop Bijwerken om deze instellingen op te slaan.
5. Kopieer App ID: Na het configureren van de FCM-instellingen krijgt u een App ID. Kopieer deze App ID, aangezien deze nodig is om de PushEngage Android SDK in uw Flutter-app te initialiseren.
iOS instellen
Project instellen
We vragen u de onderstaande stappen te volgen na het openen van uw project.
Hier leest u hoe u een project opent: uw_projectnaam » iOS » Runner.xcworkspace.
1. Schakel externe meldingen in
- Open uw Xcode-project en selecteer het hoofdproject in de Projectnavigator.
- Kies uw hoofdapp-doel.
- Navigeer naar "Signing & Capabilities."
- Zorg ervoor dat de Background Modes-mogelijkheid is toegevoegd. Zo niet, voeg deze toe door op de knop "+ Capability" te klikken.
- Zorg er op dezelfde manier voor dat de Pushmeldingen-mogelijkheid is toegevoegd. Zo niet, voeg deze toe met de knop "+ Capability".
Als de "Pushmeldingen"-mogelijkheid niet zichtbaar is in Xcode:
- Ga naar uw Apple Developer-account.
- Navigeer naar "Certificaten, Identificaties & Profielen." Selecteer uw app-identificatie.
- Bewerk de configuratie van uw App ID en zorg ervoor dat Pushmeldingen is ingeschakeld.
- Ga terug naar Xcode en probeer de Pushmeldingen-mogelijkheid opnieuw toe te voegen.
2. Achtergrondmodi inschakelen
- Navigeer in uw Xcode-project naar "Signing & Capabilities."
- Schakel binnen "Background Modes" zowel "Remote notifications" als "Background fetch." in.
- Deze stap zorgt ervoor dat uw app externe meldingen en achtergrondophalingen efficiënt kan verwerken.
Als u geen APN's-certificaat voor iOS heeft, kunt u er een aanmaken met de gids hier.
Vervolgens moet u alleen voor iOS een Notification Service-extensie en Notification Content-extensie toevoegen.
Meldingenservice-extensie maken
De Notification Service Extension verbetert de mogelijkheid van uw iOS-app om meldingen te ontvangen. Dit wordt gebruikt om de inhoud van de melding te wijzigen of om gegevens op te halen/verwerken bij het ontvangen van de melding. Volg deze stappen om een Notification Service Extension te maken:
- Open Xcode en navigeer naar uw project.
- Selecteer Bestand » Nieuw » Doel in het menu.
- Kies in het venster voor sjabloonselectie Notification Service Extension en klik op Next.
4. Geef uw extensie een naam, bijvoorbeeld PushEngageNotificationServiceExtension, en klik op Finish.
4. Geef uw extensie een naam, bijvoorbeeld PushEngageNotificationServiceExtension, en klik op Finish.
5. Wanneer u klaar bent met het maken van de Notification Service Extension, wordt u mogelijk gevraagd deze te activeren. Activeer deze niet onmiddellijk. Het activeren van de extensie zou de debugfocus van Xcode verschuiven van uw app naar de extensie. Als u deze per ongeluk activeert, hoeft u zich geen zorgen te maken; u kunt de focus in Xcode terugschakelen naar het debuggen van uw app.
6. Selecteer in de projectnavigator de map van het top-level project en selecteer het doelwit NotificationServiceExtension in het project uit de lijst met doelwitten die in stap 4 zijn gemaakt.
7. Stel de Deployment Target in op iOS 10 of hoger, de versie van iOS waarop Apple de ondersteuning voor deze extensie heeft uitgebracht.
PushEngage SDK initialiseren voor Meldingenservice-extensie
Om de juiste werking van de PushEngage SDK in uw iOS Notification Service Extension te garanderen, doorloopt u de onderstaande stappen
- Open uw_projectnaam » ios » Podfile.
- Voeg het volgende toe aan het einde van uw 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
- Installeer de afhankelijkheid:
Nu moet u de opdracht uitvoeren in de iOS-directory van uw project en de volgende opdracht uitvoeren:
pod repo update
pod install
- Zorg ervoor dat u in uw Notification Service Extension-doelwit het PushEngage-framework importeert en de benodigde initialisatiecode toevoegt. Hier leest u hoe u dit kunt doen met 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)
}
}
}
Meldinginhoud-extensie maken
Om de manier te verbeteren door een aangepaste UI toe te voegen, moet u een Notification Content Extension maken. Volg de onderstaande stappen om de extensie in te stellen:
- Ga in Xcode naar File » New » Target.
- Selecteer Notification Content Extension en klik op Next.
3. Selecteer "Activate" niet in het dialoogvenster dat verschijnt na het klikken op Finish. Annuleren zorgt ervoor dat Xcode uw app debugt in plaats van de extensie. Als u het per ongeluk activeert, schakelt u terug naar het debuggen van uw app binnen Xcode (naast de uitvoeren-knop).
4. Selecteer in de projectnavigator de hoofdmap van het project en selecteer het NotificationContentExtension-doel in het project uit de lijst met doelen die in stap 2 zijn gemaakt.
5. Stel de Deployment Target in op iOS 10 of hoger, wat de versie van iOS is waarop Apple de ondersteuning voor deze extensie heeft uitgebracht.
PushEngage SDK initialiseren voor Meldinginhoud-extensie
Volg deze stappen om de juiste werking van de PushEngage SDK in uw iOS Notification Content Extension te garanderen:
Open uw_projectnaam » iOS » Podfile.
Voeg het volgende toe aan het einde van uw Podfile:
target 'Your_Notification_Content_Extension_Name' do
use_frameworks!
pod 'PushEngage', '0.0.4'
end
- Installeer de afhankelijkheid: Hier is de code die u in uw command line moet uitvoeren.
e
pod repo update
pod install
- Zorg ervoor dat u in uw Notification Content Extension-doelwit het PushEngage-framework importeert en de benodigde initialisatiecode toevoegt. Hier leest u hoe u dit kunt doen met enkele voorbeelden van UI-elementen met 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!)
}
}
}
}
App-groepen toevoegen
App Groups zijn essentieel voor het mogelijk maken van communicatie tussen de hoofdapp, de notification service extension en de notification content extension. Volg deze stappen om App Groups toe te voegen aan uw iOS-project:
Als u al een app group hebt en deze alleen wilt gebruiken, ga dan naar stap 4.
- Selecteer in uw Xcode-project, in de projectnavigator, de map van het top-level project en selecteer het hoofd-doelwit van de app.
- Navigeer naar het tabblad Signing & Capabilities.
- Klik op de knop “+ Capability” en selecteer App Groups uit de lijst.
4. Klik op de knop + om een App Group toe te voegen.
5. Voeg een unieke naam toe aan uw App Group en klik op OK.
6. Selecteer in het hoofdgebied van de editor het hoofddoel van uw app. een app-groep aangemaakt, geef dan de naam van de groep op in uw applicatie Info.plist met de sleutel PushEngage_App_Group_Key.
7. Voeg dezelfde sleutel en waarde toe in het Info.plist-bestand van de Notification Service Extension.
8. Zorg ervoor dat u dezelfde app-groep selecteert in zowel het hoofddoel van de app als de Your_Notification_Service_Extension.
Initialiseer PushEngage SDK
Initialiseer de PushEngage SDK in uw main.dart.
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 uw AppDelegate.swift van 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 afhandelen
Een deepLinkStream is iets dat deep link-gegevens uitzendt.
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
Dat is alles, u hebt nu met succes de Flutter SDK voor Android & iOS App geïntegreerd.
Als u problemen ondervindt, kunt u contact met ons opnemen door hier te klikken. Ons ondersteuningsteam zal u kunnen helpen.
