Your App is MIA — Push Notifications

Usama Rehan
Jul 15 · 3 min read

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

Setting up Firebase

Initialising Firebase

To initialise firebase in your application paste the firebase SDK code snippet which you obtained, in the layout.blade.php file.

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.

Your final 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 layout.blade.php file.

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 firebase-messaging-sw.js file itself.

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.

Sending Notification

For simplicity, we will be sending the notification using cURL.

You can use this cURL for testing your push notification

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 💻

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade