Flutter Push Notifications

The Flutter SDK makes it easy to integrate TalkJS into your app. This guide shows you how to set up and receive push notifications from TalkJS on Flutter for both iOS and Android.

The guide assumes that you have set up the TalkJS Flutter SDK as shown in the Getting Started guide.

Android

This section guides you through the steps to set up push notifications from TalkJS with Flutter for 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 correctly configure your app for use with Firebase. Add your Firebase service account private key in the TalkJS Dashboard. For a detailed guide on how to configure Firebase, see: Configure Firebase Cloud Messaging.

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

This section guides you through the steps to set up push notifications from TalkJS with Flutter for iOS.

Begin by configuring Apple Push Notifications (APNs). See: Configure Apple Push Notifications.

Augment AppDelegate

To set up push notifications, augment your iOS app's AppDelegate.m or AppDelegate.swift file.

To augment your AppDelegate file, place the following lines inside the didFinishLaunchingWithOptions method:

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

Using other Firebase services on iOS (optional)

TalkJS sends push notifications on Android via Firebase, and on iOS using Apple Push Notification service (APNs).

However, the TalkJS Flutter package depends on the flutter_apns package, which by default disables Firebase. To enable Firebase on iOS for other services, 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/>

By setting that entry, you ensure that you can use Firebase on iOS for other services.

That completes the iOS-specific push notifications setup process.

Register Push Notification Handlers

To register push notification handlers, make a call to Talk.registerPushNotificationHandlers inside your app's main.dart file.

Call the registerPushNotificationHandlers function before runApp(), because when your application is killed—whether by the user swiping away from the recents screen, or due to low memory on the device—notifications received won't start the full app. This means that no widget code runs, and therefore no notifications are displayed.

Aside from setting up the notification handlers, the function also creates an Android notification channel. Without a notification channel, notifications won't appear on Android devices.

You can also pass an object describing the different iOS permissions you'd like to request.

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

For your user actually to receive push notifications, use the enablePushNotifications parameter in the Session constructor, to enable or turn off push notifications for that particular device.

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

Users who have enablePushNotifications set to true 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.