Laravel Firebase Push Notification Example

Laravel Firebase Push Notification Example

Laravel firebase push notification example. We will learn laravel firebase push notification. In this post, I show example of firebase web push notification.  This tutorial give firebase web push notification in laravel. Today, I show simple way...

Laravel firebase push notification example. We will learn laravel firebase push notification. In this post, I show example of firebase web push notification.  This tutorial give firebase web push notification in laravel. Today, I show simple way to firebase push notification in laravel.

We will explain step by step laravel firebase push notification example. Also, we will create example of laravel send push notification firebase. In this example, We step by step to send firebase push notification using laravel.

Google provide free open source send web push notification. Also, You learn example of send firebase push notification using laravel. In this example simple to getting device token of logged in users and send web push notification. Also we will create push notification with laravel app.

Laravel firebase push notification

Step 1 : Create Firebase Project and App for Firebase Push Notification
In this step we will login into Firebase Console  and create new project for laravel firebase push notification.
Step 2 : Install Laravel
In this step, We will install laravel fresh package firebase push notification using the following command:
composer create-project --prefer-dist laravel/laravel Firebase_Example
Step 3 : Create Laravel Auth
In this step, we will create login system using auth command in laravel, so run below command in your terminal.
composer require laravel/ui

php artisan ui bootstrap --auth // For Generate Auth

npm install // TO Install NPM

npm run dev

Step 4 : Create Migration
In this step we will to create new migration.
php artisan make:migration add_column_device_token
<?php

use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema;

class AddColumnDeviceToken extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function (Blueprint $table) { $table->string('device_token')->nullable(); }); }

/**
 * Reverse the migrations.
 *
 * @return void
 */
public function down()
{
    Schema::table('users', function (Blueprint $table) {
        //
    });
}

}

Step 5: Create Model
In this step, we will add new column device_token in users table as well as model.
<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable;

class User extends Authenticatable { use HasFactory, Notifiable;

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name',
    'email',
    'password',
    'device_token'
];

/**
 * The attributes that should be hidden for arrays.
 *
 * @var array
 */
protected $hidden = [
    'password',
    'remember_token',
];

/**
 * The attributes that should be cast to native types.
 *
 * @var array
 */
protected $casts = [
    'email_verified_at' =&gt; 'datetime',
];

}

Now, run below the following command to run migration:

php artisan migrate
Step 6 : Create Route
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;


Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

Route::post('/save-push-notification-token', [HomeController::class, 'savePushNotificationToken'])->name('save-push-notification-token'); Route::post('/send-push-notification', [HomeController::class, 'sendPushNotification'])->name('send.push-notification');

Step 7: Edit Home Controller
In this step, We will edit HomeController and added savePushNotificationToken() and  sendPushNotification() function. In this controller you require to add server API key , you need to add your server key.
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request; use App\Models\User;

class HomeController extends Controller {

public function __construct()
{
    $this-&gt;middleware('auth');
}

public function index()
{
    return view('home');
}

public function savePushNotificationToken(Request $request)
{
    auth()-&gt;user()-&gt;update(['device_token'=&gt;$request-&gt;token]);
    return response()-&gt;json(['token saved successfully.']);
}

public function sendPushNotification(Request $request)
{
    $firebaseToken = User::whereNotNull('device_token')-&gt;pluck('device_token')-&gt;all();
    $SERVER_API_KEY = 'Enter_your_serve_key';

    $data = [
        "registration_ids" =&gt; $firebaseToken,
        "notification" =&gt; [
            "title" =&gt; $request-&gt;title,
            "body" =&gt; $request-&gt;body,  
        ]
    ];
    $dataString = json_encode($data);

    $headers = [
        'Authorization: key=' . $SERVER_API_KEY,
        'Content-Type: application/json',
    ];

    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send');
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $dataString);

    $response = curl_exec($ch);

    dd($response);
}

}

Laravel firebase push notification example

firebase send push notificatio web config
Step 8 : Edit Blade File
In this step, you require to edit on your home.blade.php file and add below code.
@extends('layouts.app')

@section('content') <div class="container"> <div class="row justify-content-center"> <center><h2>Laravel Firebase Push Notification - web-tuts.com</h2></center> <div class="col-md-8">
<center> <button id="btn-nft-enable" onclick="initFirebaseMessagingRegistration()" class="btn btn-danger btn-xs btn-flat">Allow for Notification</button> </center><br> <div class="card"> <div class="card-header">{{ __('Dashboard') }}</div>

            &lt;div class="card-body"&gt;
                @if (session('status'))
                    &lt;div class="alert alert-success" role="alert"&gt;
                        {{ session('status') }}
                    &lt;/div&gt;
                @endif
                &lt;form action="{{ route('send.push-notification') }}" method="POST"&gt;

                    @csrf

                    &lt;div class="form-group"&gt;

                        &lt;label&gt;Title&lt;/label&gt;

                        &lt;input type="text" class="form-control" name="title"&gt;

                    &lt;/div&gt;

                    &lt;div class="form-group"&gt;

                        &lt;label&gt;Body&lt;/label&gt;

                        &lt;textarea class="form-control" name="body"&gt;&lt;/textarea&gt;

                      &lt;/div&gt;

                    &lt;button type="submit" class="btn btn-primary"&gt;Send Notification&lt;/button&gt;

                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js"></script> <script> var firebaseConfig = { apiKey: "XXXX", authDomain: "XXXX.firebaseapp.com", projectId: "XXXX", storageBucket: "XXXX.appspot.com", messagingSenderId: "XXXX", databaseURL: "https://Your_Project_ID.firebaseio.com", appId: "XXXX" };

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

function initFirebaseMessagingRegistration() {
        messaging
        .requestPermission()
        .then(function () {
            return messaging.getToken({ vapidKey: 'Your_Public_Key' })
        })
        .then(function(token) {
            console.log(token);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: '{{ route("save-push-notification-token") }}',
                type: 'POST',
                data: {
                    token: token
                },
                dataType: 'JSON',
                success: function (response) {
                    alert('Token saved successfully.');
                },
                error: function (err) {
                    console.log('User Chat Token Error'+ err);
                },
            });

        }).catch(function (err) {
            console.log('User Chat Token Error'+ err);
        });
 }  

messaging.onMessage(function(payload) {
    const noteTitle = payload.notification.title;
    const noteOptions = {
        body: payload.notification.body,
        icon: payload.notification.icon,
    };
    new Notification(noteTitle, noteOptions);
});

</script> @endsection

Step 9 : Create firebase-messaging-sw.js File
In this step, we will create firebase-messaging-sw.js in public folder and copy below code.
importScripts('https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js');

firebase.initializeApp({
    apiKey: "XXXX",
    authDomain: "XXXX.firebaseapp.com",
    databaseURL: "https://Your_Project_Id.firebaseio.com",
    projectId: "XXXX",
    storageBucket: "XXXX.appspot.com",
    messagingSenderId: "XXXX",        
    appId: "XXXX"
});

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload,
);

const notificationTitle = "Background Message Title";
const notificationOptions = {
    body: "Background Message body.",
    icon: "/itwonders-web-logo.png",
};

return self.registration.showNotification(
    notificationTitle,
    notificationOptions,
);

});

After following all step, you can run your project using following command:

php artisan serve

After enter the following url in your browser.

http://127.0.0.1:8000/home

Output

laravel firebase push notification

I hope you understand laravel firebase push notification and it can help you... The Original Article can be found on web-tuts.com

laravel example laravel8 firebase

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to validate mobile phone number in laravel with example

Data validation is a very important thing for a web application. In this article i will let you know how to validate mobile phone number in laravel.

Laravel 8 Livewire Form Wizard Tutorial Example

Form wizard in laravel 8 app with livewire. In this tutorial, you will learn how to implement form wizard using livewire in laravel 8 app.

How to integrate paytm payment gateway in laravel example

In this article, i will let you know to integrate paytm payment gateway in laravel with example. In this example will use paytm laravel package.

Laravel 8 Form Example Tutorial - Complete Guide

Laravel 8 form example tutorial. In this post, i will show you how to send form data on controller and insert in database using laravel 8

Laravel 7/6 Image Upload Example Tutorial

Laravel 7/6 image upload example tutorial. Here we will show you, how to upload image in laravel 7/6 with preview and validation in laravel.