Setup Push Notifications

Push notifications allow you to keep your users engaged and informed. This guide will walk you through the process of setting up Firebase Cloud Messaging (FCM), from creating a project to configuring your backend and mobile app.

1. Create a Firebase Project

The first step is to create a project in the Firebase Console.

1. Go to the Firebase Console.
2. Click Add project.
3. Enter a project name (e.g., My Awesome App) and click Continue.
4. (Optional) Enable Google Analytics for your project and click Continue.
5. Click Create project and wait for it to be ready.

2. Enable Cloud Messaging

Cloud Messaging is typically enabled by default, but you should verify it.

1. In the left-hand menu, navigate to Project Settings (the gear icon).
2. Click on the Cloud Messaging tab.
3. Ensure that the Firebase Cloud Messaging API (V1) is enabled.

3. Generate Service Account Key

To allow your backend to send notifications, you need a service account key.

1. In Project Settings, go to the Service accounts tab.
2. Under "Firebase Admin SDK", ensure Node.js or PHP is selected (it doesn't affect the JSON file content).
3. Click Generate new private key.
4. A warning modal will appear; click Generate key.
5. A .json file will be downloaded to your computer. Keep this file secure!

4. Backend Configuration (Laravel)

Once you have the service account JSON file, you need to place it in your backend server so it can authenticate with Firebase.

Placement

1. Rename the downloaded JSON file to firebase-auth.json.
2. Move the file to your Laravel backend:
   • Path: backend/laravel/storage/app/firebase-auth.json

Verification

The NotificationSenderService in the Laravel backend is pre-configured to look for this file at that specific path.

// app/Services/NotificationSenderService.php
public function __construct()
{
    $credentialsPath = storage_path('app/firebase-auth.json');

    if (file_exists($credentialsPath)) {
        $factory = (new Factory)->withServiceAccount($credentialsPath);
        $this->messaging = $factory->createMessaging();
    }
}

5. Configure Mobile App (Flutter)

The most efficient way to link your mobile app to Firebase is using the FlutterFire CLI.

Prerequisites

1. Install the Firebase CLI.
2. Log in to Firebase:

   firebase login

3. Install the FlutterFire CLI:

   dart pub global activate flutterfire_cli

Configuration

1. From the root of your Flutter project (mobile/flutter), run:

   flutterfire configure

2. Select your Firebase project from the list.
3. Select the platforms you want to support (Android and iOS).
4. This will automatically:
   • Create/Update lib/firebase_options.dart.
   • Create google-services.json for Android.
   • Create GoogleService-Info.plist for iOS.

6. iOS Specific Setup

iOS requires additional steps because of Apple's security model.

1. APNs Authentication Key:
   • Go to the Apple Developer Portal.
   • Create a new Key for "Apple Push Notifications service (APNs)".
   • Download the .p8 file.
   • In the Firebase Console, go to Project Settings > Cloud Messaging.
   • Upload the .p8 file under Apple app shares.
2. Xcode Configuration:
   • Open ios/Runner.xcworkspace in Xcode.
   • Go to Signing & Capabilities.
   • Add Push Notifications and Background Modes (check "Remote notifications").

7. Testing Notifications

You can test if everything is working correctly using the provided notification services in the backend or by sending a test message from the Firebase Console.

Via Laravel Tinker

php artisan tinker

$user = App\Models\User::first();
app(App\Services\NotificationSenderService::class)->sendToUser($user, "Hello!", "This is a test notification");

Via Firebase Console

1. In the Firebase Console, go to Engage > Messaging.
2. Click Create your first campaign.
3. Select Firebase Cloud Messaging messages.
4. Fill in the title and body, then click Send test message.
5. Enter your device token (obtained from the app logs) and click Test.