Flutter Push Notifications

With our Flutter SDK, we have made it easy to integrate TalkJS into your app. This guide will show you the necessary steps needed to setup and receive push notifications from TalkJS on Flutter for both iOS and Android.

The guide assumes that you have setup the TalkJS Flutter SDK as shown in our Getting Started guide

Android

Add Firebase Messaging SDK to your Flutter project

If you haven't already, add Firebase to your project. For (Step 4) in the previously linked tutorial, we are only interested in the firebase_messaging plugin. So you'll run the following command from inside your Flutter project directory:

flutter pub add firebase_messaging

Then afterwards run:

flutterfire configure

to ensure that your app is configured correctly for use with Firebase. Don't forget to add your FCM Server key in the TalkJS Dashboard.

Note: If you will only be using Firebase for push notifications on Android, make sure that when you run flutterfire configure, you only select Android and NOT iOS. If you are using other firebase services also on iOS, follow the instructions in this section

Next, you can follow the Apple setup below or jump to registering push notification handlers.

iOS

Add Capabilities

To ensure your app properly handles push notifications, you need to enable two capabilities in your Xcode project:

  • Background Mode capability - tick Remote Notifications
  • Push Notifications capability

Follow this guide for how to add capabilities to your app on Xcode.

Generate Certification Request file (CSR)

You will use this file later when obtaining a push notification certificate from Apple. Open the Keychain Access app on your macOS system. Next, select Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority.... Enter your information in the required fields in the popup and select the Save to disk option. Save the file.

Obtain Push Notification certificate from Apple

In your Apple Developer Account, select Certificates, IDs & Profiles in the sidebar. Then go to, Identifiers. Locate and click the identifier that matches your app's BundleID on Xcode to edit it. If you don't have one, you can press the + (plus) button to create a new identifier. Under Capabilities make sure that Push Notifications is enabled.

Next, go to Certificates and create a new certificate by clicking the + (plus) button. Under Services, select Apple Push Notification service SSL (Sandbox & Production) and click Continue. The certificate will be applicable to both Sandbox and Production environments. Next, in the dropdown presented, choose the AppId (Your Team ID and Your app's Bundle ID separated by a fullstop) that has a BundleID that matches your App's. You will then be asked to upload a Certificate Signing Request. Use the file we created earlier using Keychain Access. Finally, click Download to save the certificate to your computer.

Upload Push Notification certificate

Double Click the Certificate you have just downloaded to add it to Keychain Access. In Keychain Access, select login under keychain and My Certificates from the side menu. Locate the Push Notifaction certificate and then right click it to export it.

In the window that appears, make sure the File Format is set to "Personal Information Exchange (.p12)". Click on "Save" to save it to your machine. When asked for a password, leave it blank and click on "Ok." Our TalkJS backend requires the Push Notification certificate to be a valid .p12 file without a password.

Now go to your TalkJS Dashboard and upload the .p12 file you have just exported. Once the upload is done, click on "Save Push Notification Settings".

Augment AppDelegate

You now need to add some code in your iOS app's AppDelegate.m/AppDelegate.swift file. The following lines should be placed inside the didFinishLaunchingWithOptions method:

if (@available(iOS 10.0, *)) {
  [UNUserNotificationCenter currentNotificationCenter].delegate = (id<UNUserNotificationCenterDelegate>) self;
}

Using other Firebase services on iOS (Optional)

As noted, we send push notification on Android via Firebase and on iOS we use Apple Push Notification service(APNs). If you shall be using Firebase on iOS for other services, then add the following configuration entry to your Info.plist either by editing the file directly or via Xcode:

<key>flutter_apns.disable_swizzling</key>
<true/>

And that completes the iOS specific push notifications setup process.

Register Push Notification Handlers

Now, you will need to make a call to Talk.registerPushNotificationHandlers inside your app's main.dart file. This function should be called before runApp(). This is because, when your application is killed either by the user swiping away from the recents screen or due to low memory on the device, any notifications received will not start the full app. This means that no widget code will run and therefore no notifications will be displayed.

Aside from setting up the notification handlers, the function also creates an Android Notification Channel. Without a Notification Channel, notifications will not appear. (This applies only to Android devices)

Also, you can pass an object describing the different iOS permissions you'd like to be requested.

Below is an example main.dart file:

import 'package:flutter/material.dart';
import 'package:talkjs_flutter/talkjs_flutter.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';


Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();


  if (Platform.isAndroid) {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
  }


  await Talk.registerPushNotificationHandlers(
    androidChannel: const AndroidChannel(
      channelId: 'com.example.talkjsflutter.messages',
      channelName: 'Messages',
    ),
    iosPermissions: const IOSPermissions(
      alert: true,
      badge: true,
      sound: true,
    ),
  );


  runApp(const MyApp());
}

Enable push notifications

Finally, depending on whether your user actually wants to receive push notifications, you will use the parameter, enablePushNotifications in the Session constructor to enable or disable push notifications being sent by the TalkJS backend to that particular device.

final session = Session(
  appId: 'YOUR_APP_ID',
  enablePushNotifications: true,
);

Now users will have message notifications displayed whenever the app is in the background.

If you have any issues receiving push notifications you can reach out to us via our support chat.