Laravel Send Web Push Notification with Firebase Tutorial

When a website or web app sends you a message, it will be highly visible and easy to respond to if it was sent via Web Push Notifications. Web push notifications are similar to push notifications in that they can be sent to a device even if the user is not currently using the platform. These alerts, which can also be referred to as "Browser Push Notifications," are ideal for sending users relevant information in real time. In fact, Facebook may have been the largest exploiter of this channel back when it was just getting started. Many Facebook users, as evidenced by this thread, were baffled and even annoyed by the fact that the social media platform could send them notifications even when they weren't logged in or using the Facebook app.

Push notifications on the web vs. push notifications in mobile apps

A website with web push code installed is all that's needed to send web push notifications. This means that even though they may not have an app, brands without apps can still take advantage of many of the benefits of push notifications (immediate, personalized communications). Push notifications are messages sent to your device from an app. A desktop computer displaying a web push notification example (Macbook with a Chrome browser version 58 or older). On the left is a screenshot of a web notification on an Android mobile device. The following components make up web push notifications: Brand Name in Notification Title: Some companies use their actual brand name in this context. The contents of the notification are the words written in the message. Different browsers and operating systems have different character limits. Conciseness is preferred. Web site sending the alert is indicated by the "notification URL." A logo or other image can serve as the notification icon. Icon of Notifying Browser: The icon representing the browser that has sent the alert. Any alerts sent to an Apple computer will include this information. Nothing can be done to change or remove this. In addition to the standard notification icon, some browsers and operating systems allow a large image to be included in a web notification.

How push notifications from websites are received and processed

It is possible for any business with a website to send web push notifications by adding some code (a web-based SDK from a web push service) to its site. No download is necessary. If a user clicks or taps on a web push notification, they will be directed to a specific URL that the company has chosen in advance.

The evolution of push notifications on the web

Web Push notifications were initially made available to users by Chrome in early 2015, when the browser's version number was 42. This version included "two new APIs that together allowed sites to push native notifications to their users even after the page was closed—provided that the user had granted explicit permission for the site to do so." Following the update, websites were able to send notifications in the same way that apps could. It was supposedly the most important mobile feature that was missing from the web, and as a result, upon its release, there was a dramatic increase in the number of web publishers adopting it. 2003 saw the release of push email for the Blackberry OS. This prevented business class passengers and executives from having to continuously check their emails. Virtually everyone is of the opinion that this was the driving force behind Blackberry's success. Apple introduced the APN in June of 2009. (Apple push notification). The very first notification push service ever created. The Android Cloud-to-device messaging service was introduced by Google in May of 2010. (C2DM). Android 2.2 saw the debut of Google's first notification service for its mobile operating system. In June of 2012, C2DM was changed to its successor, GCM, in order to overcome the limitations that C2DM possessed. This is significant because GCM is responsible for facilitating the delivery of push notifications at the present time. It has been upgraded to include new capabilities in the new version that is known as FCM. Chrome Version 42, which included support for native web push notifications, was released in April of 2015. In January of 2015, Firefox released version 44, which included improvements to its support for web push. On the mobile site, this was not relevant at all. In August of 2016, Firefox expanded its support for web push to include mobile devices. Rich web push notifications were first made available by Chrome with version 56 in February of 2017.
Below I have written tutorial on how you can send web push notification from your laravel admin using firebase .

Step 1 : Setup Laravel Project

We need Laravel setup and running in our host. It may be your local host. So, If you don't have a laravel project already installed, then first do it . I haven't mentioned the laravel installation process here. I considered you already have done this. You can find lots of other websites for laravel installation.

Step 2 : Create Firebase Project and get server key

We are using firebase cloud messaging API for our web push notifications. So, we should register our app on firebase website. Here you will learn how to get the Firebase cloud messaging server key and the configuration credentials for the Firebase web app. So, go to the firebase website https://console.firebase.google.com/ and create a Firebase project there. put your app name then click continue On next step , you can disable 'Google Analytics' Now, click 'Create Project'. This will take some sec to create a project. Then you will be redirected to the FCM dashboard.

Add Firebase to your web app

click 3rd icon that shows 'web' . It will add Firebase to your web app. Now, put your app nick name then click 'Register App'. Then select 'Use a script tag' in next step. Now copy key details. We need these in our laravel project to communicate with firebase. Then you can proceed on next steps.

Get Firebase Cloud Messaging (FCM) 's Server Key

Scroll up on this page and see a gear icon on the right side of heading 'Project Overview' . Click on this project setting icon . Copy this server key. We need it in our laravel code. Note: If Server key not showing here then goto google cloud project https://console.cloud.google.com/ Search 'API and Service' In the Enable APIs and Services section, click +Enable APIs and Services, and search cloud messaging; Now go to Cloud Messaging and Firebase Cloud Messaging API one by one and enable it.

Step 3: create new database table 'token_web_push' and model file

We need this table to store tokens of users visiting our website that allows us to receive web push notifications from our website. Then create a modal file inside your laravel 'App/Models' folder . This will have below code.

Step 4 : Create Firebase (FCM) File

create a new firebase-messaging-sw.js in your laravel project root folder. It will have below code. Also replace with your related firebase configuration in 'PUT_HERE'

Step 5: create controller file 'WebNotificationController.php'

Now we have to create a controller file 'WebNotificationController.php' inside 'app\Http\Controllers' to execute our web push notification sending logic. Put below code in this controller file .

Step 6 : Create 'Admin\BrowserNotificationController.php' controller file

Put below code

Step 7 : Add below inside your laravel route file

I considered that it has already set up admin middleware. So, I have mentioned it in 'AdminMiddleware'

Step 8 : Create admin view files

We need below 3 view files in admin 'resources\views\admin\browser_notification'

• index.blade.php
• create.blade.php
• edit.blade.php

code of index.blade.php

code of create.blade.php

 @if(Session::has('message')) 
 {{ Session::get('message') }} 
 @endif

@if (Session::has('errors')) 
 @foreach ($errors->all() as $error)
    {{ $error }}
 @endforeach 
 @endif  
 
 
 
 Create  
 
 
 
Dashboard
 
 Manager
 
Create
 
 
 
   Back 
 
 
 
  
 {{csrf_field()}} 
 
 
 Details
 
 
  
 
 {{old('body')}} 
 
  
 
  
 
   Send Now  
 
 
  
 
 
  @endsection 

code of edit.blade.php

 @if(Session::has('message')) 
 {{ Session::get('message') }} 
 @endif

@if (Session::has('errors')) 
 @foreach ($errors->all() as $error)
    {{ $error }}
 @endforeach 
 @endif  
  
 
 
 Edit  
 
 
 
Dashboard
 
 Manager
 
Edit
 
 
 
   Back 
 
 
 
  
 {{csrf_field()}} 
 
 
 
  
 
 {{$item->body}} 
 
 {{$item->image}} 
 
 {{$item->link}} 
 
   Send Now  
 
 
  
 
 
  @endsection 

Step 9 : Send web push notifcation from laravel admin dashboard

Put here

• Title: notification title
• Description : The notification body
• Image Link : the path of the image, it can be your logo image path
• Link : The final page link to open when user click the notification

In this way, I have created our own admin interface to use practically in production to send web push notifications without using any command line. I hope you can also send web notifications in your laravel project . You can write any query in the comments below, I will try my best to reply soon. If you are looking for any PHP, Laravel web development work then you can hire me.