Send push notifications using OneSignal with Flutter, Firebase & PHP Laravel.

Hello everyone I am going to share my knowledge about push notifications through ‘OneSignal’. I tested it on Android & IOS devices. Here, I used an app that I was implemented using Flutter.

Let’s say I have created a mobile app that has a feature for users to sign up for the app. So users can install the app on their mobile device & create an account.

Now I want to send some notifications regarding the user’s activities on that mobile app, like their payments confirmation, order confirmation, next due payment dates, etc. Then it’s really easy for customers (users) to get connected with the system. Because he/she will get the most recent updates about their activities on our mobile application. This is the main advantage of using push notifications.

To push notifications I thought to use ‘OneSignal’ REST APIs. Therefore, first of all, we need to get some knowledge about ‘OneSignal’.

What is OneSignal?

OneSignal is the fastest & reliable service that enables push notifications. This provides not only push notifications but also messaging solutions such as rich SMS, email, and in-app messaging through a marketer dashboard and OneSignal REST APIs.

Hope you have a brief idea about OneSignal & push notifications.

A screenshot of my final output (taken from android emulator). But I have tested this on real devices also. So don’t worry, this is working fine on real devices as well.

To accomplish my requirements I thought to follow the below steps. Don’t worry guys it’s really easy. Let’s see my plan!!!!!!!! :)

1. App Registration with ‘OneSignal’.
2. Add firebase server key & sender id.
3. Integrate the OneSignal Flutter SDK to my flutter app for iOS and Android.
4. Integrate OneSignal REST API with my flutter app.

Okay, guys let’s start!!!!!!!!!!

1) App Registration with ‘OneSignal’.

• If you don’t have an account on OneSignal, create a one using this link. Click here to register to OneSignal
• Now click on Add a New App. Enter your app name & select Google Android (FCM). Then click on the “Next: Configure Your Platform” button.

• Okay, now we have to add Firebase Server details. To do that let’s go to our firebase console.

2) Get the firebase server key and the sender id.

If you don’t know how to create a project on firebase, you can follow the below section which I was written in italic font. Otherwise, you can skip this italic fonts section.

I. Login to your firebase console and click on create a project button.

II. Now enter your project name & continue. Next, you will get a google analytics confirmation page & click ‘continue’ on that page also.

III. Select analytics location & click Create Project button.

Okay project creating on firebase process is over.

Let’s get sever keys.

Please follow the below steps.

Go to your Project Overview -> Project settings.

Select the Cloud Messaging. Then you find the server key and sender Id.

Get those keys & add those to OneSignal. Click on Save & Continue.

Then select the platform as Flutter and continue -> Click on Done.

Now navigate to Keys & IDs. Now you can see your OneSignal App ID & Rest API Key.

Tadaaa!! We finished all configuration parts. Ok, now we can start to integrate the one signal to your Flutter App :)

3) Integrate the OneSignal Flutter SDK to your Flutter App.

First of all, we have to set up some configurations (Set of requirements) for ios and android. To configure that iOS Requirements & Android Requirements please follow the below Onesignal official documentation link. Make sure to follow Step 1 from that document.

Flutter SDK Setup

If your app is for ios, make sure to “Add an iOS Service Extension” and “Enable iOS Push Capability in Xcode”. If you don’t know how to do that you can follow step 3 and step 4 in the above OneSignal official documentation.

Okay, now we can start OneSignal SDK integration.

• Add to OneSignal Flutter SDK to our flutter app, we need to update our pubspec.yaml file and run pub get command.
• OneSignal flutter plugin

• Now in the flutter project go to android -> app -> build. gradle file & add below code.

• Go to lib -> create a folder called constant & create a file inside that, called constant.dart.

Add your OneSignal APP id.

• Go to lib -> main.dart file

If you build your App Now, this would register a user on the one signal.

Wait we have more work to do. Okay, keep going guys. You’re almost there!!!!!!

Let’s say your customer is going to log into your app from two devices. Then you have to send notifications for both mobiles. Because he/she logged into the same account through 2 different devices. So how can we do this? Don’t worry. It’s easy through OneSignal :)

OneSignal creates channel-level device records under a unique Id called the player_id. A single user can have multiple player_id records based on how many devices, email addresses, and phone numbers they use to interact with your app. If your app has its own login system to track users, call setExternalUserId at any time to link all channels to a single user.

Okay, let’s add an external ID to our app when the user has been logged in to our app. So I thought to add setExternalUserId, once the login response is successful.

I haven’t written LoginEvent & LoginState methods. So you can write it according to your requirements. So please check on LoginBloc class in the above code.

4) Integrate OneSignal REST API with my flutter app.

I have stored notifications for a particular user, in a table (DB). So now I will create a REST API for getting those notifications from DB & send it to the flutter app. I will create a rest API using PHP Laravel framework. Let’s see my code for the rest API.

This is my route file.

This is my controller function.

This is a repository interface file.

This is a repository file. Here I get data from DB & pass it to the controller function.

Okay!! Now we are going to call the OneSignal REST API.

Okay!! This is the place where you are going to call the OneSignal REST API.

In my application, I wanted to send notifications continuously. So I decided to run this API inside a cron. So every 15 min I am running this cron job & if there are unread notifications available in the DB it will send to the user through the above OneSignal API. I have written another rest API to update the notification table when the user reads notifications.

Yeyyyyyy!!! We did it. You guys did an amazing job!

Hope you guys got some knowledge about push notifications with onesignal, flutter, and PHP. If there is anything I should improve about my article or any point you guys not clear please do let me know.
Thanks for reading :)

REFERENCE :

1. OneSignal

Overview of the OneSignal Platform

2. Laravel

Installation

3. Flutter

Flutter documentation

4. Images and gif

Free Icons and Stickers - Millions of resources to download

Tenor GIF Keyboard - Bring Personality To Your Conversations