Opsætning af App Push-notifikationer i Flutter ved hjælp af PushEngage

PushEngage Flutter SDK gør det nemt at integrere push-notifikationer i dine Flutter-applikationer og giver problemfri kompatibilitet med både Android- og iOS-platforme.

Denne guide vil føre dig gennem trinene til at opsætte PushEngage Flutter SDK og aktivere push-notifikationer på dine Android- og iOS-apps.

Før du starter

Her er en liste over ting, du skal bruge

• Et Flutter-projekt & PushEngage-konto. Hvis du ikke har en konto, kan du tilmelde dig her.
• Firebase-konto med Firebase Cloud Messaging (FCM) opsat til Android.
• En Apple Developer-konto til at konfigurere Apple Push Notification (APN) tjenester til iOS.

Installation

1. Åbn dit Flutter-projekt i din kodeeditor.

2. Tilføj følgende afhængighed i din pubspec.yaml fil:

dependencies:
	pushengage_flutter_sdk: ^0.0.1

3. Kør følgende kommando for at installere pakken.

dependencies:
flutter pub get

Opsætning af Android

Firebase Cloud Messaging (FCM) Opsætning

For at aktivere push-notifikationer til Android skal du konfigurere Firebase Cloud Messaging (FCM):

1. Få adgang til Firebase-konsollen ved hjælp af din Google-konto.

2. Opret et nyt projekt eller vælg et eksisterende projekt: Klik på “Tilføj projekt” for at oprette et nyt projekt, eller vælg et eksisterende projekt fra din liste. Hvis du bruger et eksisterende projekt, skal du fortsætte direkte til trin 4.

3. Angiv projektdetaljer: Tilføj et navn til dit projekt og klik på Fortsæt. Gennemfør opsætningsprocessen ved at klikke på “Opret projekt” på den sidste skærm.

4. Tilføj en Android-app til projektet: På dit Firebase-projektdashboard skal du klikke på Android-ikonet for at tilføje en Android-app.

5. Konfigurer Android-app: Angiv din Android-apps pakkenavn (findes i android/app/build.gradle under android-blokken) og angiv et appnavn. Klik på Registrer, når du er færdig.

6. Download konfigurationsfil: Download google-services.json-filen, og placer den i roden af dit Android-appmodul på android/app/

7. Generer Service Account JSON

• I Firebase-konsollen skal du klikke på Indstillinger-ikonet ved siden af “Projektoversigt” øverst til venstre og derefter vælge Projektindstillinger.
• Naviger til fanen Servicekonti.
• Klik på Generer ny privat nøgle, og download .json-filen.
• Opbevar denne fil sikkert, da du skal bruge den til opsætningen af PushEngage-dashboardet.

8. Hent afsender-ID

• I Firebase-konsollen skal du klikke på Indstillinger-ikonet ved siden af Projektoversigt øverst til venstre og vælge “Projektindstillinger.”
• Vælg fanen Cloud Messaging. Her finder du afsender-ID'et, som er nødvendigt for initialisering af PushEngage SDK.

Integrer FCM med PushEngage Dashboard

For problemfrit at integrere FCM-detaljer med PushEngage Dashboard, skal du følge nedenstående trin:

1. Få adgang til din PushEngage-konto ved at logge ind med dine legitimationsoplysninger.

2. Naviger til Indstillinger » Installation og vælg derefter fanen Android SDK

4. Nu, Konfigurer FCM-indstillinger

• Indtast dit Firebase Sender ID (hentet fra Firebase Console).
• Upload Service Account JSON-filen (downloadet fra Firebase).
• Klik på knappen Opdater for at gemme disse indstillinger.

5. Kopier App ID: Efter konfiguration af FCM-indstillingen får du et App ID. Kopier dette App ID, da det er nødvendigt for at initialisere PushEngage Android SDK i din Flutter-app.

Opsætning af iOS

Opsætning af projekt

Vi beder dig følge nedenstående trin efter at have åbnet dit projekt.

Her er hvordan du kan åbne et projekt: dit_projektnavn » iOS » Runner.xcworkspace.

1. Aktivér Fjernnotifikationer

• Åbn dit Xcode-projekt, og vælg rodprojektet i projektnavigatoren.
• Vælg din primære app-mål.
• Naviger til “Signing & Capabilities.“
• Sørg for, at Background Modes-kapabiliteten er tilføjet. Hvis ikke, skal du tilføje den ved at klikke på knappen “+ Capability“.
• Sørg ligeledes for, at Push Notifications-kapabiliteten er tilføjet. Hvis ikke, skal du tilføje den ved hjælp af knappen “+ Capability“.

Hvis “Push Notifications”-kapabiliteten ikke er synlig i Xcode:

• Gå til din Apple Developer-konto.
• Naviger til “Certificates, Identifiers & Profiles.“ Vælg din app-identifikator.
• Rediger konfigurationen af din App ID, og sørg for, at Push Notifications er aktiveret.
• Vend tilbage til Xcode, og forsøg at tilføje Push Notifications-kapabiliteten igen.

2. Aktivér Baggrundstilstande

• I dit Xcode-projekt skal du navigere til “Signing & Capabilities.“
• Inde i “Background Modes“, aktivér både “Remote notifications” og “Background fetch.“
• Dette trin sikrer, at din app kan håndtere fjernnotifikationer og baggrundshentninger effektivt.

Hvis du ikke har et APN’s-certifikat til iOS, kan du oprette et ved hjælp af guiden her.

Dernæst skal du tilføje Notification Service extension og Notification Content Extension kun for iOS.

Oprettelse af Notification Service Extension

Notification Service Extension forbedrer din iOS-apps evne til at modtage notifikationer. Dette bruges til at ændre notifikationens indhold eller hente/behandle data ved modtagelse af notifikationen. Følg disse trin for at oprette en Notification Service Extension:

1. Åbn Xcode og naviger til dit projekt.
2. Vælg Arkiv » Ny » Mål i menuen.
3. I vinduet til valg af skabelon skal du vælge Notification Service Extension og klikke på Næste.

4. Angiv et navn til din udvidelse, f.eks. PushEngageNotificationServiceExtension, og klik på Udfør.

4. Angiv et navn til din udvidelse, f.eks. PushEngageNotificationServiceExtension, og klik på Udfør.

5. Når du er færdig med at oprette Notification Service Extension, kan du blive bedt om at aktivere den. Aktiver den ikke med det samme. Aktivering af udvidelsen ville skifte Xcodes debugging-fokus fra din app til udvidelsen. Hvis du aktiverer den ved et uheld, skal du ikke bekymre dig; du kan skifte tilbage til at debugge din app i Xcode.

6. I projektnavigatoren skal du vælge den øverste projektmappe og vælge NotificationServiceExtension-målet i projektet fra listen over mål oprettet i trin 4.

7. Indstil Deployment Target til iOS 10 eller nyere, hvilket er den version af iOS, som Apple udgav understøttelsen for denne udvidelse. 

Initialiserer PushEngage SDK til Notification Service Extension

For at sikre korrekt funktion af PushEngage SDK i din iOS Notification Service Extension, skal du gennemgå nedenstående trin

1. Åbn dit_projektnavn » ios » Podfile.
2.  Tilføj følgende til bunden af din 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

3. Installer afhængigheden:

Nu skal du indtaste kommandoen i iOS-mappen i dit projekt og udføre følgende kommando:

pod repo update 

pod install

4. I dit Notification Service Extension-mål skal du sørge for at importere PushEngage-frameworket og tilføje den nødvendige initialiseringskode. Her er, hvordan du kan gøre det ved hjælp af 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)
        }
    }

}

Oprettelse af Notification Content Extension

For at forbedre måden ved at tilføje brugerdefineret UI, skal du oprette en Notification Content Extension. Følg nedenstående trin for at opsætte udvidelsen:

1. I Xcode skal du gå til Arkiv » Ny » Mål.
2. Vælg Notification Content Extension og klik på Næste.

3. Vælg ikke "Aktiver" i dialogboksen, der vises efter at have klikket på Udfør. Annullering holder Xcode til at debugge din app i stedet for udvidelsen. Hvis du ved et uheld aktiverer den, skal du skifte tilbage til at debugge din app i Xcode (ved siden af køreknappen).

4. I projektnavigatoren skal du vælge den øverste projektmappe og vælge NotificationContentExtension-målet i projektet fra listen over mål oprettet i trin 2.

5. Indstil Deployment Target til iOS 10 eller nyere, hvilket er den version af iOS, som Apple udgav understøttelsen for denne udvidelse. 

Initialiserer PushEngage SDK til Notification Content Extension

For at sikre korrekt funktion af PushEngage SDK i din iOS Notification Content Extension, skal du følge disse trin:

Åbn dit_projektnavn » iOS » Podfile.

Tilføj følgende til bunden af din Podfile:

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

1. Installer afhængigheden: Her er koden, du skal køre i din kommandolinje.

e

pod repo update 
pod install

2. In your Notification Content Extension target, make sure to import the PushEngage framework and add the necessary initialization code. Here’s how you can do it with some example of UI elements using 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!)
}
        }
    }
}

Add App Groups

App Groups are essential for enabling communication between the main app, notification service extension, and notification content extension. Follow these steps to add App Groups to your iOS project:

If you have an existing app group and want to use that only, skip to step no. 4.

1. In your Xcode project, in the project navigator, select the top-level project directory and select the main target of the app.
2. Navigate to the Signing & Capabilities tab.
3. Click the “+ Capability” button and select App Groups from the list.

4. Click on the + button to add an App Group.

5. Add a unique name to your App Group and click on OK.

6. In the main editor area, select the main target of your app.  created an app group please provide the name of the group in your application Info.plist with key PushEngage_App_Group_Key.

7. Add the same key and value in the Notification Service Extension’s Info.plist file.

8. Make sure you select the same app group in both Main Application Target and the Your_Notification_Service_Extension.

Initialize PushEngage SDK

In your main.dart, initialize the 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 your AppDelegate.swift of 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)
    }
}

Handling deepLink

A deepLinkStream is something that emits deep link data. 

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

That is all, you have now successfully integrated the Flutter SDK for Android & iOS App.

Hvis du støder på problemer, bedes du kontakte os ved at klikke her. Vores supportteam vil kunne hjælpe dig.