Add push-notification service to Angular 6.1 in Cordova by using Laravel notification/queue and Firebase cloud messaging

Image for post
Image for post

Sometimes each developer faced a challenge to how to set up push notification for his app. In this article, we will talk about how to do this with Angular 6.1 application wrapped with Cordova and by using Laravel backend with firebase cloud messaging. This implementation only for Android but should work for IOS as well with an additional effort which is not covered in this article.

As a result, we can send test HTTP request to our backend via Postman and see the push-notification and email only for a specific user

How it should work schematically

Logically we can split all things in to buckets:

  1. Backend logic for creating and sending notifications due to our Business Logics
  2. Frontend logic for recieving push notification in our mobile app

1. Backend logic

We have to setup two threads. Thread number 1 will do our business logic and send task to table ‘job’ in our database via laravel notification. For this purpose we will use systemctl to run background task:

Our first service/thread config file:
/etc/systemd/system/notification.service

in order to start:

Command code:

It’s just work perfect and you can test it by using email notification first. However, we are interesting in sending push notification and for this purposes we can use following laravel package: https://github.com/benwilkins/laravel-fcm-notification.

Our notification class:

Now then the script execute Notification::send function, laravel will add job in our table with same name ‘jobs’, in order to start execute jobs in background we have to setup systemctl separate process or processes, example of service/thread2:
/etc/systemd/system/queue.service:

in order to start:

If your user has email field in DB table user and you setup the config/mail.php (how to setup with gmail) its should work! Your Business logic send job to the table Jobs in Thread 1, Thread 2 pickup the task and by using

sending email to logged user;

2. Frontend logic and a little bit more for backend

This part is a bit more complicated, especially for me, but let’s get started.
If we implement our backend with FCM support we have to clarify how to send a notification to the particular user or to be precise to a particular device.
By using our cordova/angular 6.1 application (finally we have to update our app to 6.1 to support typescript to 2.9 and other dependencies ) we have to generate google-service.json inside firebase dashboard: How to.
And setup api-key at laravel backend in: config/service.php :

You can find the FCM KEY in firebase dashboard:

(gear-next-to-project-name) > Project Settings > Cloud Messaging

Server Key is the FCM key/API key.

When we have to put google-service.json in root of our cordova project and probably add line in config.xml

Next thing that we have to add few cordova plugins and npm package

and one third party package:https://github.com/ercobo/angular-cordova in order to work with cordova in angular 6 app

Now let’s go to the code, first we have to get device token inside our app and send to our database, following code will figure it out:

This is how its should look like in our DB:

By using this tokens we can test our application at https://console.firebase.google.com/project/YOUR-PROJECT-NAME/notification

In our backend class Models/User.php we have to add additional method for pickup this tokens:

Now, we can enable FCM in our method

Literally it’s done! Don’t forget to restart your systemctl services and laravel will send personal notification to yours Angular6.1/Cordova app

Hope, it was useful to read and if you have any questions, please don’t hesitate to leave a comment, since probably I forgot to mention something :-)

I am writing about my entrepreneurial journey as a full-stack developer and co-founder at Sensivo.eu. https://skob.io/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store