When it comes to sending out notifications from our application to users, there are many ways to do so. You can send out emails, SMS, or even Push Notifications. These channels help us create solutions that deliver custom notifications to users at scale.
Create account and new project suppose name of this project is “push_notification”.
Register a web app for connect to firebase.
Finish all the steps after click on next button. Copy this code and paste on your project where you want to use.
Click on project setting and the goto cloud messaging tab.
Click on this 3 dots for enable this features for push notification.
Click on this option and enable this feature.
Now you will get this server key.
Enable notification on browser side.
Coding Part
NotificationController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\User; use Auth; class NotificationSendController extends Controller { public function updateDeviceToken(Request $request) { Auth::user()->device_token = $request->token; Auth::user()->save(); return response()->json(['Token successfully stored.']); } public function sendNotification(Request $request) { $url = 'https://fcm.googleapis.com/fcm/send'; $FcmToken = User::whereNotNull('device_token')->pluck('device_token')->all(); // OR // $FcmToken = DB::table('users')->where('id', 1)->get(); // $device_id = ''; // foreach($FcmToken as $FcmTokens){ // $device_id = $FcmTokens->device_id; // } $serverKey = 'app-server-key'; // ADD SERVER KEY HERE PROVIDED BY FCM $data = [ "registration_ids" => $FcmToken, "notification" => [ "title" => $request->title, "body" => $request->body, "icon" => "https://cdn-icons-png.flaticon.com/512/6774/6774898.png", ] ]; $encodedData = json_encode($data); $headers = [ 'Authorization:key=' . $serverKey, 'Content-Type: application/json', ]; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1); // Disabling SSL Certificate support temporarly curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_POSTFIELDS, $encodedData); // Execute post $result = curl_exec($ch); if ($result === FALSE) { die('Curl failed: ' . curl_error($ch)); } // Close connection curl_close($ch); // FCM response dd($result); } }
Both authentication methods are defined here in the above controller.
Step 13: home.blade.php
Here in this blade file, we required some config as given the below code.
resources/views/home.blade.php
@extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <button onclick="startFCM()" class="btn btn-danger btn-flat">Allow notification </button> <div class="card mt-3"> <div class="card-body"> @if (session('status')) <div class="alert alert-success" role="alert"> {{ session('status') }} </div> @endif <form action="{{ route('send.web-notification') }}" method="POST"> @csrf <div class="form-group"> <label>Message Title</label> <input type="text" class="form-control" name="title"> </div> <div class="form-group"> <label>Message Body</label> <textarea class="form-control" name="body"></textarea> </div> <button type="submit" class="btn btn-success btn-block">Send Notification</button> </form> </div> </div> </div> </div> </div> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://www.gstatic.com/firebasejs/8.3.2/firebase.js"></script> <script> var firebaseConfig = { apiKey: "api-key", authDomain: "auth-domian", databaseURL: 'db-url', projectId: "project-id", storageBucket: "storage-bucket", messagingSenderId: "message-sender-id", appId: "app-id", measurementId: "measurement-id" }; firebase.initializeApp(firebaseConfig); const messaging = firebase.messaging(); function startFCM() { messaging .requestPermission() .then(function () { return messaging.getToken() }) .then(function (response) { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: '{{ route("store.token") }}', type: 'POST', data: { token: response }, dataType: 'JSON', success: function (response) { alert('Token stored.'); }, error: function (error) { alert(error); }, }); }).catch(function (error) { alert(error); }); } messaging.onMessage(function (payload) { const title = payload.notification.title; const options = { body: payload.notification.body, icon: payload.notification.icon, }; new Notification(title, options); }); </script> @endsection
public/firebase-messaging-sw.js // Give the service worker access to Firebase Messaging. // Note that you can only use Firebase Messaging here. Other Firebase libraries // are not available in the service worker.importScripts('https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js'); /* Initialize the Firebase app in the service worker by passing in the messagingSenderId. */ firebase.initializeApp({ apiKey: "api-key", authDomain: "auth-domian", databaseURL: 'db-url', projectId: "project-id", storageBucket: "storage-bucket", messagingSenderId: "message-sender-id", appId: "app-id", measurementId: "measurement-id" }); // Retrieve an instance of Firebase Messaging so that it can handle background // messages. const messaging = firebase.messaging(); messaging.setBackgroundMessageHandler(function(payload) { console.log("Message received.", payload); const title = "Hello world is awesome"; const options = { body: "Your notificaiton message .", icon: "/firebase-logo.png", }; return self.registration.showNotification( title, options, ); });
web.php Route::group(['middleware' => 'auth'],function(){ Route::post('/store-token', [NotificationSendController::class, 'updateDeviceToken'])->name('store.token'); Route::post('/send-web-notification', [NotificationSendController::class, 'sendNotification'])->name('send.web-notification'); });
