DEV Community

Cover image for How to send Push Notifications with Laravel and the new FCM Http V1 API ?
Agence Appy
Agence Appy

Posted on • Updated on

How to send Push Notifications with Laravel and the new FCM Http V1 API ?

Hello world 😎,

If you work in web development, one day you will need to send push notifications. Push Notifications are usefull in so many cases. With them, you can target the right customers or users, increase user retention, boost conversion rates and increase app engagement.

I essentially work with Laravel. In most of projects, clients need to send push notifications to users. To stay up to date, I wanted to use the new FCM Http V1 API. The first time I tried to implement it in Laravel, it wasn't really fun. I had to search in so many websites to achieve what I needed. I haven't found any Laravel package with easy install and usage, so I decided to create one.

In this package, you just need to setup your Firebase project and your Laravel application in one go.

After that, you will be able to send notifications in only 2 lines.

This tutorial will teach you step by step how to implement FCM V1 in your Laravel project. We w'll see how to configure Firebase project and Laravel App. You will see how to generate FCM device tokens, how to subscribe/unsubscribe tokens to topic and finally how two send push notification in the easiest way. Ready ?


Firebase configuration

To configure Firebase Cloud Messaging V1, please refer to the Firebase Install of our package appy/fcmhttpv1.

Laravel configuration

To configure Laravel project, please refer to the Laravel section of our package appy/fcmhttpv1.

FCM V1 Implementation


Create and save a user with the device token.


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

return new class extends Migration
    public function up()
        Schema::create('users', function (Blueprint $table) {
            $table->text('device_token'); // We'll use this field to store the device token

    public function down()

Enter fullscreen mode Exit fullscreen mode


Add device_token to fillable properties.



namespace App\Models;

use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
    protected $fillable = [
Enter fullscreen mode Exit fullscreen mode


Create route to store the device token.



use App\Http\Controllers\FCMController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');

Route::post('/register-token', [ FCMController::class, 'registerToken'])->name('register-token');
Enter fullscreen mode Exit fullscreen mode


Create and save an user with the device token.



namespace App\Http\Controllers;

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

class FCMController extends Controller
    public function registerToken(Request $req){
        $user = new User();
        $user->device_token = $req->token;
Enter fullscreen mode Exit fullscreen mode


In this view, we'll generate a FCM device token. Then we'll send it to our controller.

{{-- /resources/views/welcome.blade.php --}}

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <script src=''></script>
    <script src=''></script>
    <script type="text/javascript">
        const firebaseConfig = {
            apiKey: "{{ config('fcm_config.firebase_config.apiKey') }}",
            authDomain: "{{ config('fcm_config.firebase_config.authDomain') }}",
            projectId: "{{ config('fcm_config.firebase_config.projectId') }}",
            storageBucket: "{{ config('fcm_config.firebase_config.storageBucket') }}",
            messagingSenderId: "{{ config('fcm_config.firebase_config.messagingSenderId') }}",
            appId: "{{ config('fcm_config.firebase_config.appId') }}",

        const messaging = firebase.messaging();

        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

            .then(() =>
            .then(function(res) {
                fetch("{{ route('register-token') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        body: JSON.stringify({
                            _token: csrfToken,
                            token: res
                    .catch(error => console.error(error));
            .catch(function(err) {
                console.error('catch', err);

Enter fullscreen mode Exit fullscreen mode


To send notification, we'll use Laravel Command.(We use Laravel Command just for test)

php artisan make:command FCM
Enter fullscreen mode Exit fullscreen mode

namespace App\Console\Commands;

use App\Models\User;
use Appy\FcmHttpV1\FcmNotification;
use Appy\FcmHttpV1\FcmTopicHelper;
use Illuminate\Console\Command;

class FCM extends Command
     * The name and signature of the console command.
     * @var string
    protected $signature = '<command name>';

     * The console command description.
     * @var string
    protected $description = 'Command description';

     * Execute the console command.
     * @return int
    public function handle()
        $token = User::find(1)->device_token;

        FcmTopicHelper::subscribeToTopic([$token], "general");
        $notif = new FcmNotification;
        $notif->setTitle("Hello")->setBody("Content here")->setIcon("images/icons/icon-72x72.png")->setTopic("general")->send();
Enter fullscreen mode Exit fullscreen mode

To send notification, just run :

php artisan <command name>
Enter fullscreen mode Exit fullscreen mode

Thanks for reading !

Top comments (3)

leftright1 profile image

I'll definitely take a look on this

ramay2088 profile image

use this package benwilkins/laravel-fcm-notification

agenceappy profile image
Agence Appy

Hey, thanks for your reply ! this package is great but it only works with the legacy api. We've built ours to use the new HTTP v1 API.