Flutter Push Notifications

If you haven't already, configure your app to use Firebase. When configuring your app to use Firebase, you may skip installing firebase_core and firebase_messaging (steps 3 and 4 in the linked tutorial), since the talkjs-flutter library already depends on them.

To correctly configure your app for use with Firebase, make sure you run the following command after installing talkjs-flutter:

1flutterfire configure

Add your Firebase service account private key on the Settings page in your TalkJS dashboard. For a detailed guide on how to do that, 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 the section on sending push notifications on iOS using Firebase.

If your app is targeting Android 13 or higher, you are required to request for a new runtime permission called POST_NOTIFICATIONS in order for the app to display notifications.

You first need to declare the permission in your app's manifest file (android/app/src/main/AndroidManifest.xml) by placing the following line within the <manifest> tag:

XML
1<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

You then need to request for the permission at runtime using flutter_local_notifications. Add it as a dependency in your project by running:

1flutter pub add flutter_local_notifications;

You can then import and use it as shown below:

DART
1import 'dart:io' show Platform;
2import 'package:flutter_local_notifications/flutter_local_notifications.dart';
3
4// Other code...
5
6if (Platform.isAndroid) {
7  await FlutterLocalNotificationsPlugin()
8      .resolvePlatformSpecificImplementation<
9          AndroidFlutterLocalNotificationsPlugin>()!
10      .requestNotificationsPermission();
11};

You can request for this permission at any point in your app's flow that makes sense for your project and its users.

Regardless of whether you use Apple Push Notifications (APNs) or Firebase, Apple requires that an iOS app requests for the necessary notification permissions before being able to display push notifications. You can request for these permissions at any point in your app's flow by using flutter_local_notifications.

Add it as a dependency in your project by running:

1flutter pub add flutter_local_notifications;

You can then import and use it as shown below:

DART
1import 'dart:io' show Platform;
2import 'package:flutter_local_notifications/flutter_local_notifications.dart';
3
4// Other code...
5
6if (Platform.isIOS) {
7  await FlutterLocalNotificationsPlugin()
8      .resolvePlatformSpecificImplementation<
9          IOSFlutterLocalNotificationsPlugin>()!
10      .requestPermissions(sound: true, alert: true, badge: true);
11}

Begin by configuring Apple Push Notifications (APNs) on the TalkJS dashboard. See: Configure Apple Push Notifications.

You then need to augment your iOS app's AppDelegate.m or AppDelegate.swift file by placing the following lines inside the didFinishLaunchingWithOptions method:

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

Next, you can jump to registering push notification handlers.

By default TalkJS sends push notifications on Android via Firebase, and on iOS using Apple Push Notification service (APNs). However, we also support sending push notification on iOS via Firebase.

If you haven't already, make sure to configure Firebase in your Flutter project as shown above. When you run flutterfire configure, make sure to select iOS as one of the platforms to configure. Also, don't forget to upload your APNs authentication key on your project's Firebase console.

You then need to add the following configuration entry to your Info.plist:

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

The reason for the above entry is because the TalkJS Flutter package depends on the flutter_apns package, which by default disables Firebase. That entry prevents the flutter_apns package from doing so. This ensures that you can use Firebase on iOS for push notifications as well as Analytics among other Firebase services.