Konfigurera app-push-aviseringar i Flutter med PushEngage

PushEngage Flutter SDK gör det enkelt att integrera push-notiser i dina Flutter-applikationer, och erbjuder sömlös kompatibilitet med både Android- och iOS-plattformar.

Den här guiden guidar dig genom stegen för att konfigurera PushEngage Flutter SDK och aktivera push-notiser i dina Android- och iOS-appar.

Innan du börjar

Här är en lista över saker du skulle behöva

• Ett Flutter-projekt & PushEngage-konto. Om du inte har ett konto kan du registrera dig här.
• Firebase-konto med Firebase Cloud Messaging (FCM) konfigurerat för Android.
• Ett Apple Developer-konto för att konfigurera Apple Push Notification (APN) -tjänster för iOS.

Installation

1. Öppna ditt Flutter-projekt i din kodredigerare.

2. Lägg till följande beroende i din pubspec.yaml fil:

dependencies:
	pushengage_flutter_sdk: ^0.0.1

3. Kör följande kommando för att installera paketet.

dependencies:
flutter pub get

Konfigurera Android

Firebase Cloud Messaging (FCM) konfiguration

För att aktivera push-notiser för Android måste du konfigurera Firebase Cloud Messaging (FCM):

1. Gå till Firebase-konsolen med ditt Google-konto.

2. Skapa ett nytt projekt eller välj ett befintligt projekt: Klicka på "Lägg till projekt" för att skapa ett nytt projekt, eller välj ett befintligt projekt från din lista. Om du använder ett befintligt projekt, fortsätt direkt till steg 4.

3. Ange projektdetaljer: Ange ett namn för ditt projekt och klicka på Fortsätt. Slutför installationsprocessen genom att klicka på "Skapa projekt" på den sista skärmen.

4. Lägg till en Android-app i projektet: I din Firebase-projektdashbord, klicka på Android-ikonen för att lägga till en Android-app.

5. Konfigurera Android-app: Ange ditt Android-apps paketnamn (finns i android/app/build.gradle under android-blocket) och ange ett appnamn. Klicka på Registrera när du är klar.

6. Ladda ner konfigurationsfil: Ladda ner filen google-services.json och placera den i roten av din Android-appmodul på android/app/

7. Generera Service Account JSON

• I Firebase-konsolen, klicka på Inställningar-ikonen bredvid "Projektsöversikt" längst upp till vänster, välj sedan Projektinställningar.
• Navigera till fliken Servicekonton.
• Klicka på Generera ny privat nyckel och ladda ner .json-filen.
• Förvara denna fil säkert eftersom du behöver den för PushEngage-dashbordkonfigurationen.

8. Hämta avsändar-ID

• I Firebase-konsolen, klicka på Inställningar-ikonen bredvid Projektsöversikt längst upp till vänster och välj "Projektinställningar."
• Välj fliken Cloud Messaging. Här hittar du avsändar-ID, som behövs för initialisering av PushEngage SDK.

Integrera FCM med PushEngage Dashboard

För att sömlöst integrera FCM-detaljer med PushEngage Dashboard, följ stegen nedan:

1. Gå till ditt PushEngage-konto genom att logga in med dina uppgifter.

2. Navigera till Inställningar » Installation och välj sedan fliken Android SDK

4. Konfigurera nu FCM-inställningar

• Ange ditt Firebase Sender ID (hämtat från Firebase Console).
• Ladda upp Service Account JSON-filen (nedladdad från Firebase).
• Klicka på knappen Uppdatera för att spara dessa inställningar.

5. Kopiera App-ID: Efter att ha konfigurerat FCM-inställningarna får du ett App-ID. Kopiera detta App-ID eftersom det krävs för att initiera PushEngage Android SDK i din Flutter-app.

Konfigurera iOS

Konfigurera projekt

Vi ber dig följa stegen nedan efter att ha öppnat ditt projekt.

Här är hur du kan öppna ett projekt: ditt_projektnamn » iOS » Runner.xcworkspace.

1. Aktivera fjärrnotiser

• Öppna ditt Xcode-projekt och välj rotnoden i projektnavigatorn.
• Välj din huvudsakliga app-mål.
• Navigera till "Signering & Behörigheter."
• Se till att behörigheten Bakgrundslägen är tillagd. Om inte, lägg till den genom att klicka på knappen "+ Behörighet".
• På samma sätt, se till att behörigheten Push-notiser är tillagd. Om inte, lägg till den med knappen "+ Behörighet".

Om behörigheten "Push-notiser" inte är synlig i Xcode:

• Gå till ditt Apple Developer-konto.
• Navigera till "Certifikat, identifierare & profiler." Välj din app-identifierare.
• Redigera konfigurationen av ditt App ID och se till att Push-notiser är aktiverat.
• Återgå till Xcode och försök att lägga till behörigheten Push-notiser igen.

2. Aktivera bakgrundslägen

• I ditt Xcode-projekt, navigera till "Signering & Behörigheter."
• Inom "Bakgrundslägen", aktivera både "Fjärrnotiser" och "Bakgrundshämtning."
• Detta steg säkerställer att din app kan hantera fjärrnotiser och bakgrundshämtningar effektivt.

Om du inte har ett APN-certifikat för iOS kan du skapa ett med hjälp av guiden här.

Därefter behöver du lägga till Notification Service extension och Notification Content Extension endast för iOS.

Skapa Notification Service Extension

Notification Service Extension förbättrar din iOS-apps förmåga att ta emot notiser. Detta används för att modifiera notisens innehåll eller hämta/bearbeta data vid mottagande av notisen. Följ dessa steg för att skapa en Notification Service Extension:

1. Öppna Xcode och navigera till ditt projekt.
2. Välj Arkiv » Nytt » Mål från menyn.
3. I fönstret för mallval, välj Notification Service Extension och klicka på Nästa.

4. Ange ett namn för din tilläggsmodul, till exempel PushEngageNotificationServiceExtension, och klicka på Slutför.

4. Ange ett namn för din tilläggsmodul, till exempel PushEngageNotificationServiceExtension, och klicka på Slutför.

5. När du är klar med att skapa Notification Service Extension kan du bli ombedd att aktivera den. Aktivera den inte omedelbart. Att aktivera tilläggsmodulen skulle flytta Xcodes felsökningsfokus från din app till tilläggsmodulen. Om du aktiverar den av misstag, oroa dig inte; du kan växla tillbaka till att felsöka din app i Xcode.

6. I projektnavigeraren, välj den översta projekthuvudkatalogen och välj NotificationServiceExtension-målet i projektet från mållistan som skapades i steg 4.

7. Ställ in Deployment Target till iOS 10 eller senare, vilket är den version av iOS som Apple släppte stödet för denna tilläggsmodul. 

Initiera PushEngage SDK för Notification Service Extension

För att säkerställa korrekt funktion av PushEngage SDK i din iOS Notification Service Extension, gå igenom stegen nedan

1. Öppna ditt_projektnamn » ios » Podfile.
2.  Lägg till följande längst ner i 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. Installera beroendet:

Nu behöver du ange kommandot i iOS-katalogen för ditt projekt och köra följande kommando:

pod repo update 

pod install

4. I ditt Notification Service Extension-mål, se till att importera PushEngage-ramverket och lägg till nödvändig initialiseringskod. Här är hur du kan göra det med 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)
        }
    }

}

Skapa Notification Content Extension

För att förbättra sättet genom att lägga till anpassat UI, behöver du skapa en Notification Content Extension. Följ stegen nedan för att ställa in tillägget:

1. I Xcode, gå till Arkiv » Nytt » Mål.
2. Välj Notification Content Extension och klicka på Nästa.

3. Välj inte “Aktivera” i dialogrutan som visas efter att ha klickat på Slutför. Att avbryta gör att Xcode felsöker din app istället för tillägget. Om du av misstag aktiverar det, byt tillbaka till att felsöka din app inom Xcode (bredvid körknappen).

4. I projektnavigatören, välj den översta projektdirektori och välj NotificationContentExtension-målet i projektet från mållistan som skapades i steg nr. 2.

5. Ställ in Deployment Target till iOS 10 eller senare, vilket är den version av iOS som Apple släppte stödet för detta tillägg. 

Initiera PushEngage SDK för Notification Content Extension

För att säkerställa korrekt funktion av PushEngage SDK i din iOS Notification Content Extension, följ dessa steg:

Öppna ditt_projektnamn » iOS » Podfile.

Lägg till följande längst ner i din Podfile:

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

1. Installera beroendet: Här är koden du behöver köra i din kommandotolk.

e

pod repo update 
pod install

2. I ditt Notification Content Extension-mål, se till att importera PushEngage-ramverket och lägg till nödvändig initialiseringskod. Här är hur du kan göra det med några exempel på UI-element med 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!)
}
        }
    }
}

Lägg till App Groups

App Groups är avgörande för att möjliggöra kommunikation mellan huvudappen, tilläggsmodulen för meddelandetjänsten och tilläggsmodulen för meddelandeinnehåll. Följ dessa steg för att lägga till App Groups i ditt iOS-projekt:

Om du har en befintlig appgrupp och bara vill använda den, hoppa till steg 4.

1. I ditt Xcode-projekt, i projektnavigeraren, välj den översta projekthuvudkatalogen och välj appens huvudmål.
2. Navigera till fliken Signering & Behörigheter.
3. Klicka på knappen “+ Behörighet” och välj App Groups från listan.

4. Klicka på knappen + för att lägga till en App Group.

5. Lägg till ett unikt namn för din App Group och klicka på OK.

6. I huvudredigeringsområdet, välj huvudmålet för din app.  skapade en appgrupp, ange namnet på gruppen i din applikations Info.plist med nyckeln PushEngage_App_Group_Key.

7. Lägg till samma nyckel och värde i Notification Service Extensions Info.plist-fil.

8. Se till att du väljer samma appgrupp i både Main Application Target och Your_Notification_Service_Extension.

Initiera PushEngage SDK

I din main.dart, initiera 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(),
    );
  }
}

I din AppDelegate.swift för iOS-appen

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

Hantering av deepLink

En deepLinkStream är något som skickar ut 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

Det var allt, du har nu framgångsrikt integrerat Flutter SDK för Android & iOS App.

Om du stöter på några problem, vänligen kontakta oss genom att klicka här. Vårt supportteam kommer att kunna hjälpa dig.