Firebase Push Notifications: A Comprehensive Guide for Android and iOS

Photo by Jamie Street on Unsplash

Introduction
Mobile push notifications have become a crucial communication channel for app developers to engage their users and keep them informed about important updates. Firebase Cloud Messaging (FCM) is a powerful platform provided by Google that allows you to send push notifications to both Android and iOS devices. In this tutorial, we will not only learn how to integrate Firebase with Laravel to send push notifications but also cover the step-by-step process of setting up a Firebase project.

Prerequisites
Before diving into the implementation, make sure you have the following prerequisites in place:

A Laravel project set up and running.
Composer installed on your system to manage Laravel dependencies.

Firebase Account: Sign up for a Firebase account (https://firebase.google.com/) and create a new project.

Step 1: Create a New Firebase Project

1. Go to the Firebase website (https://firebase.google.com/) and sign in with your Google account.
2. Click on the “Get started” button to create a new project.
3. Enter a unique project name and select your preferred country/region. Agree to the terms and click on “Create project.”

Step 2: Set Up Firebase Credentials

1. After creating the project, you’ll be redirected to the Firebase console. Click on the gear icon (⚙️) and select “Project settings.”
2. Under the “General” tab, scroll down to the “Your apps” section and click on the “Add app” button (</>).
3. Choose the platform (Android or iOS) you want to set up for push notifications. Follow the on-screen instructions to register your app. For Android, you’ll need to provide your Android package name, and for iOS, you’ll need your bundle ID.
4. Download the google-services.json (for Android) and GoogleService-Info.plist (for iOS) configuration files. Keep them safe, as they contain sensitive information about your Firebase project.

Step 3: Install Required Packages

To start, we need to install the “kreait/laravel-firebase” package, which simplifies the integration of Firebase with Laravel.

Run the following command in your Laravel project directory:

composer require kreait/laravel-firebase

Step 4: Configure Laravel Service Provider

In this step, we will register the Laravel Firebase package’s service provider to ensure it’s loaded properly.

Open the config/app.php file and add the following line to the 'providers' array:

'providers' => [
    // ...
    Kreait\Laravel\Firebase\ServiceProvider::class,
],

Step 5: Add Firebase Credentials to Laravel

Copy the google-services.json (for Android) and GoogleService-Info.plist (for iOS) files you downloaded earlier into your Laravel project's root directory.

Step 6: Create a Notification

Now, let’s create a notification class that will define the content of the push notification we want to send.

In the terminal, run the following command:

php artisan make:notification PushNotification

This will generate a new notification class inside the app/Notifications directory.

Open the app/Notifications/PushNotification.php file and define the toFcm method to customize the notification content:

use Kreait\Firebase\Messaging\Notification;
use Kreait\Laravel\Firebase\Facades\FirebaseMessaging;

// ...

public function toFcm($notifiable)
{
    return (new Notification())
        ->title('New Notification')
        ->body('Hello, this is a test notification from Laravel and Firebase!')
        ->image('https://example.com/image.jpg');
}

Step 7: Trigger the Push Notification

To test the push notification, we’ll use a simple route in Laravel. Open your routes/web.php file and add the following route:

use App\Notifications\PushNotification;

Route::get('/send-notification', function () {
    $user = auth()->user(); // Assuming you have a user model and authentication system
    $user->notify(new PushNotification());
    return "Notification sent!";
});

Step 8: Handling iOS Push Notifications

For iOS devices, we need to modify the notification to include the ‘sound’ and ‘badge’ attributes in the toFcm method:

public function toFcm($notifiable)
{
    return (new Notification())
        ->title('New Notification')
        ->body('Hello, this is a test notification from Laravel and Firebase!')
        ->image('https://example.com/image.jpg')
        ->iosOptions([
            'sound' => 'default',
            'badge' => 1,
        ]);
}

Step 9: Test the Push Notifications

Ensure you have an authenticated user for the route ‘/send-notification’ to work correctly. Visit this route in your browser, and it will trigger the push notification to the authenticated user’s device.

Conclusion
Congratulations! You have successfully set up a Firebase project and integrated it with Laravel to send push notifications to both Android and iOS devices using FCM. Push notifications are a powerful way to engage with your users and keep them informed about important updates in real-time. Feel free to customize the notification content and explore more features provided by Firebase Cloud Messaging to enhance your app’s user experience. Happy coding!