Setting Up App Push Notification in Flutter using PushEngage

The PushEngage Flutter SDK makes it easy to integrate push notifications into your Flutter applications, providing seamless compatibility with both Android and iOS platforms.

This guide will walk you through the steps to set up the PushEngage Flutter SDK and enable push notifications on your Android and iOS apps.

Before You Start

Here is a list of things you would require

• A Flutter project & PushEngage account. If you do not have an account you can sign up here.
• Firebase account with Firebase Cloud Messaging (FCM) setup for Android.
• An Apple Developer account to configure Apple Push Notification (APN) services for iOS.

Installation

1. Open your Flutter project in your code editor.

2. Add the following dependency in your pubspec.yaml file:

dependencies:
	pushengage_flutter_sdk: ^0.0.1

3. Run the following command to install the package.

dependencies:
flutter pub get

Setting Up Android

Firebase Cloud Messaging (FCM) Setup

To enable push notifications for Android, you’ll need to configure Firebase Cloud Messaging (FCM):

1. Access the Firebase console using your Google account.

2. Create a new project or select an existing Project: Click on “Add Project” to create a new project, or select an existing project from your list. If you’re using an existing project, proceed directly to step 4.

3. Enter Project Details: Add a name for your project and click Continue. Complete the setup process by clicking “Create project” on the final screen.

4. Add an Android App to the Project: In your Firebase project dashboard, click on the Android icon to add an Android app.

5. Configure Android App: Enter your Android app’s package name (found in android/app/build.gradle under the android block) and provide an app name. Click Register when done.

6. Download Configuration File: Download the google-services.json file and place it in the root of your Android app module at android/app/

7. Generate Service Account JSON

• In the Firebase console, click the Settings icon next to “Project Overview” in the top left, then select Project settings.
• Navigate to the Service accounts tab.
• Click Generate new private key, and download the .json file.
• Keep this file safe as you will need it for the PushEngage dashboard setup.

8. Retrieve the Sender ID

• In the Firebase console, click the Settings icon next to Project Overview in the top left and select “Project settings.”
• Select the Cloud Messaging tab, Here, you’ll find the Sender ID, which is needed for PushEngage SDK initialization.

Integrate FCM with PushEngage Dashboard

To seamlessly integrate FCM details with the PushEngage Dashboard, follow the steps outlined below:

1. Access your PushEngage account by logging in with your credentials.

2. Navigate to Settings » Installation now choose the tab Android SDK

4. Now, Configure FCM Settings

• Enter your Firebase Sender ID (retrieved from the Firebase Console).
• Upload the Service Account JSON file (downloaded from Firebase).
• Click the Update button to save these settings.

5. Copy App ID: After configuring the FCM settings, you’ll be provided with an App ID. Copy this App ID as it is required to initialize the PushEngage Android SDK in your Flutter app.

Setting Up iOS

Setting Up project

We request you to follow the below the steps after opening your project.

Here is how you can open a project : your_project_name » iOS » Runner.xcworkspace.

1. Enable Remote Notifications

• Open your Xcode project and select the root project in the Project Navigator.
• Choose your main app target.
• Navigate to “Signing & Capabilities.“
• Ensure that Background Modes capability is added. If not, add it by clicking the “+ Capability” button.
• Similarly, ensure that the Push Notifications capability is added. If not, add it using the “+ Capability” button.

If the “Push Notifications” capability is not visible in Xcode:

• Go to your Apple Developer account.
• Navigate to “Certificates, Identifiers & Profiles.” Select your app identifier.
• Edit the configuration of your App ID and ensure that Push Notifications is enabled.
• Return to Xcode and attempt to add the Push Notifications capability again.

2. Enable Background Modes

• In your Xcode project, navigate to “Signing & Capabilities.“
• Inside “Background Modes“, enable both “Remote notifications” and “Background fetch.“
• This step ensures that your app can handle remote notifications and background fetches efficiently.

If you do not have an APN’s certificate for iOS, you can create one using the guide here.

Next, you need to add Notification Service extension and Notification Content Extension only for iOS.

Creating Notification Service Extension

The Notification Service Extension enhances your iOS app’s capability to receive notifications. This is used to modify the notification’s content or fetch/process any data on receiving the notification. Follow these steps to create a Notification Service Extension:

1. Open Xcode and navigate to your project.
2. Select File » New » Target from the menu.
3. In the template selection window, choose Notification Service Extension and click Next.

4. Provide a name for your extension, for example, PushEngageNotificationServiceExtension, and click Finish.

4. Provide a name for your extension, for example, PushEngageNotificationServiceExtension, and click Finish.

5. When you finish creating the Notification Service Extension, you might be prompted to activate it. Do not activate it immediately. As activating the extension would shift Xcode’s debugging focus from your app to the extension. If you activate it by accident, don’t worry; you can switch back to debugging your app within Xcode.

6. In the project navigator, select the top-level project directory and select the NotificationServiceExtension target in the project from the targets list created in step no. 4.

7. Set the Deployment Target to be at iOS 10 or above, which is the version of iOS that Apple released the support for this extension. 

Initializing PushEngage SDK for Notification Service Extension

To ensure the proper functioning of PushEngage SDK in your iOS Notification Service Extension, please go through below steps

1. Open your_project_name » ios » Podfile.
2.  Add the following to the bottom of your 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. Install the dependency:

Now you need to give command into the iOS directory of your project and execute the following command:

pod repo update 

pod install

4. In your Notification Service Extension target, make sure to import the PushEngage framework and add the necessary initialization code. Here’s how you can do it using 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)
        }
    }

}

Creating Notification Content Extension

To improve the way by adding custom UI, you’ll need to create a Notification Content Extension. Follow the steps below to set up the extension:

1. In Xcode, go to File » New » Target.
2. Select Notification Content Extension and click Next.

3. Do not select “Activate” on the dialog that appears after clicking Finish. Canceling keeps Xcode debugging your app instead of the extension. If you accidentally activate it, switch back to debugging your app within Xcode (next to the run button).

4. In the project navigator, select the top-level project directory and select the NotificationContentExtension target in the project from the targets list created in step no. 2.

5. Set the Deployment Target to iOS 10 or above, which is the version of iOS that Apple released the support for this extension. 

Initializing PushEngage SDK for Notification Content Extension

To ensure the proper functioning of PushEngage SDK in your iOS Notification Content Extension, follow these steps:

Open your_project_name » iOS » Podfile.

Add the following to the bottom of your Podfile:

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

1. Install the dependency: Here is the code you need to run in your command line.

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.

If you run into any issues, please contact us by clicking here. Our support team will be able to help you.