A Laravel package for integrating Firebase Cloud Messaging (FCM) to handle push notifications seamlessly.
To install the package, use Composer:
composer require joydeep-bhowmik/laravel-push-notification
And add this in your bootstrap/providers
<?php
return [
JoydeepBhowmik\LaravelPushNotification\Providers\FcmServiceProvider::class
];
After installation, publish the package assets using the following command:
php artisan vendor:publish --tag=fcm-all
php artisan vendor:publish --tag=fcm-tokens-model
This command will publish the following resources:
- Configuration file:
config/fcm.php
- Firebase service worker:
public/firebase-messaging-sw.js
- Main JavaScript file:
public/js/fcm.js
- Firebase Auth script:
public/js/firebase-auth.js
- UserDevice model:
app/Models/UserDevice.php
- Migration for UserDevice:
database/migrations/
(with a timestamp) - Push notification switch Blade component:
resources/views/components/push-notification-switch.blade.php
After publishing, configure the FCM settings in config/fcm.php
. Ensure you set the correct Firebase credentials and other options as needed.
Make sure to set the FIREBASE_CREDENTIALS
in your .env
file.
and replace api keys in public/firebase-messaging-sw.js
,resources/js/fcm.js
,storage/framework/app/firebase-auth.js
.
Run the migrations to create the necessary database tables:
php artisan migrate
To send notifications, create a notification class that uses the FcmChannel
.
Here’s how to create a notification class that utilizes the FcmChannel
:
namespace App\Notifications;
use Illuminate\Notifications\Notification;
use Kreait\Firebase\Messaging\WebPushConfig;
use Kreait\Firebase\Messaging\ApnsConfig;
use Kreait\Firebase\Messaging\AndroidConfig;
class YourNotification extends Notification
{
public function via($notifiable)
{
return [FcmChannel::class];
}
public function toFcm($notifiable)
{
return [
// 'topic'=>'topic-name', if you want to send message in a topic
'notification' => [
'title' => 'Notification Title',
'body' => 'Notification body text.',
'icon' => 'https://your-server.example/icon.png',
],
'webpush' => [
'notification' => [
'title' => 'Notification Title',
'body' => 'Notification body text.',
'icon' => 'https://your-server.example/icon.png',
],
],
'android' => [
'notification' => [
'title' => 'Android Notification Title',
'body' => 'Android notification body text.',
'icon' => 'android-icon',
'color' => '#f45342',
],
],
'apns' => [
'payload' => [
'aps' => [
'alert' => [
'title' => 'APNs Notification Title',
'body' => 'APNs notification body text.',
],
'badge' => 42,
'sound' => 'default',
],
],
],
];
}
}
Include the necessary JavaScript files in your application to handle push notifications. You can add the following in your main js file:
// resources/js/app.js
import "./fcm";
Make sure to replace the placeholders in your firebaseConfig
in fcm.js
and the service worker:
const firebaseConfig = {
apiKey: "YOUR_API_KEY_HERE",
authDomain: "YOUR_AUTH_DOMAIN_HERE",
projectId: "YOUR_PROJECT_ID_HERE",
storageBucket: "YOUR_STORAGE_BUCKET_HERE",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID_HERE",
appId: "YOUR_APP_ID_HERE",
measurementId: "YOUR_MEASUREMENT_ID_HERE",
};
You can use the push-notification-switch
Blade component in your views to allow users to enable or disable push notifications.
<x-push-notification-switch />
This package is licensed under the MIT License. See the LICENSE file for more information.