Morioh
Login
Web tuts

Web tuts

3 years ago

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

fcm.googleapis.com

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...

7.35 GEEK