The Developer community don’t bother about implementing push notifications in web applications. Push notifications play a vital role in user engagements. It helps in bringing back the users back to your applications.
But many a time it annoys the users, if not careful. Sending notifications back to back notifications for a simple task is bad technique. So, we must notify the user(s) only for the major/critical task which needs urgent attention.
With that said, let’s get started.
We will be using Laravel & Firebase Cloud Messaging to implement Push Notifications.
If you have no idea about Firebase, checkout out this awesome article on Hackernoon
Introduction to Firebase🔥
A brief post about what Firebase is all about, and it’s new NoSQL Database — Cloud Firestore
Setting up Firebase
- Create an account on https://firebase.google.com/
- Go to your console https://console.firebase.google.com/
- Add a new Project with your desired name
- Add a new app inside the created project.
- Copy the Firebase SDK snippet.
To initialise firebase in your application paste the firebase SDK code snippet which you obtained, in the
Along with that you need also need to include the firebase messaging kit which is not present in the snippet. You could import the script with this line.
One you imported all the necessary code in your layout file, initialisation of firebase is complete.
layout.blade.php file would look like this
Acquiring User content and Token
Before you start sending Push Notification, you need to generate a firebase token and the user’s consent. You can do this using the following code snippet.
When the user accepts the permission, you get a token for that user. You will use this token to send notifications to the user. Ideally, you would save the token generated in the database for future use.
Service Worker Registration
Firebase provides its own service worker setup by creating a file called `firebase-messaging-sw.js`.
This file lets us handle any incoming push notification when the user is not using your application.
Let’s us create a service-worker file and add the same Firebase SDK snippet which was obtained in the firebase console.
Note: This service worker file must be created under the public/ directory of your Laravel Application.
Receiving Push Notifications
There are two types of notification you could receive,
- In-app notifications — When the user is already using the application and the user receives the notifications.
- Background Notifications — When the user is out of your Application.
First, let us see how can we receive the in-app notification. To do that you must add the following code in the
The above function lets us receive the in-app notification and the payload will have all the data which you send through the back-end.
For receiving background push notifications you would use the following code snippet,
This code snippet lets us receive background notification. Same as in-app notification, the payload has all the data which is sent from the back-end. Notice the return? It tells the browser to display the notification even when the browser is closed.
NOTE: You can add this background notification code in the
The Manifest File
The last step is to create a manifest.json file with the Google Cloud Messaging Sender ID. The ID ensures the firebase is allowed to send push notification to the application. Your
manifest.json file will be like this
NOTE: The GCM ID is common for everyone, so please do not change the GCM ID.
For simplicity, we will be sending the notification using
You can use this cURL for testing your push notification
curl -X POST \
-H 'Authorization: key=<YOUR_API_KEY>' \
-H 'Content-Type: application/json' \
"title": "Push Notification",
"body": "Hello World!",
"icon" : "notification-icon.png"
That’s all, your users are now ready to receive push notification in your application.
Check out this video for detailed information.
I hope this tutorial was useful for you.
Thanks for reading & Happy Coding Everyone 💻