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
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.
To ensure your app properly handles push notifications, you need to enable two capabilities in your Xcode project:
Background Mode
capability - tickRemote Notifications
Push Notifications
capability
Follow this guide for how to add capabilities to your app on Xcode.
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.
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.
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".
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;}
if #available(iOS 10.0, *) {UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate}
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.
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());}
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.