One of the most requested features when you develop an app are Push Notifications. Those messages are an awesome way to engage users with personalized content but may be a bit hard to implement “the good way”. Here we want to show you how easy it is to implement on your Flutter application Push Notifications using the power of MBurger and the MBMessages library.
Initialize MBurger and add MBMessages
If you haven’t done it already check out our article about Pull to Refresh to know how to create a new MBurger project. In a few words you’ll need to:
- Register for free on MBurger
- Create a new project
- Create an API Key
First step completed, well done!
Configure push notifications on MBurger
Next we’ll configure push notifications on our app. Let’s return on MBurger website and let’s enable Push Notifications on settings. Here you can also enable integrations with other systems real easily.
By enabling it a new menu called “Engagement” on the left will appear. Here you’ll have to configure MBurger to use the MPush subsystem in order to send Push Notifications.
Click on it and then on “Settings”.
In this screen you’ll see a generated token and two boxes, one for Android and one for iOS. You’ll need to compile those boxes by linking your Firebase and AppStore Connect apps.
For iOS you’ll need to create an APNS API Key (click here if you are not sure on how to achieve it), you’ll also need to add your Apple Team ID and App Bundle. Once you have added all click on “Update”. Be aware for the “Production” checkbox, if you’re trying push notification on a development device keep this checkbox to off and enable it only one you’ll go live.
Then you have to modify the
AppDelegate class of your application, open
AppDelegate.swift file and add this line in the
The app delegate should look like this.
On Android side you’ll need to create a Firebase project and configure it (refer to this guide). Lastly copy the
FCM server key onto MBurger and give it a good “Update”.
Remember for Android to add this to your project build.gradle file:
and this to your app build.gradle
You are almost done, it’s time to code!
This is a really easy part. You’ll need to initialize MBurger and add MBMessages as a plugin, so it can be initialized and you can instantaneously start receiving messages.
Let’s head over to your main widget and initialize MBurger with your personal API Key:
This way you’ll have initialized MBurger, now we need to add MBMessages and initialize it with the key provided on MBurger.
Next you’ll need to use
MBMessages.configurePush and implement these methods:
onNotificationArrival-> called when a Push Notification arrives on your device
onNotificationTap-> called when a Push Notification is tapped
Lastly you’ll need to set the
Android notification channel for push notifications. You should provide a name, description and id for your channel as well as an icon stored in
mipmap folders on Android part.
Next you’ll need to implement the
onToken method found on MBMessages. This is called when you register your device for receiving push notifications. You can easily then register to the topics you want after it. MBMessages provides already 2 “standard” topics, one for all users and one dedicated to single devices:
The code for this step will result like this:
Lastly you’ll need to request a token from Firebase and APNS, then if you followed this tutorial your device will be registered for push notifications.
That’s it! You have set up push notifications!
Now it’s time to check if everything is working properly! On MBurger click on Engagement -> Messages. Create a new push message and see the magic unfolds!