Skip to main content

Push Notification Configuration (Firebase)

This section explains how to configure Firebase for push notifications, including Firebase project creation, SDK generation, VAPID key setup, and Laravel configuration.

1. Create Firebase Account & Project​

  1. Go to Firebase Console
  2. Sign in with a Google account
  3. Click Add project
  4. Enter a project name (example: restaurant)
  5. Enable or skip Google Analytics
  6. Click Create project

After completion, your Firebase project will be ready to use.

2. Register Web App (Generate Firebase Config)​

  1. Open your Firebase project
  2. Go to Project Settings (⚙️ icon)
  3. Under Your apps, click the Web (</>) icon
  4. Enter an app nickname (example: Restaurant Web Panel)
  5. Click Register app

Firebase will provide configuration values like apiKey, projectId, and messagingSenderId. These values are used in the frontend and stored in Laravel config.

3. Generate Firebase Admin SDK (Service Account)​

  1. Firebase Console → Project Settings
  2. Open the Service accounts tab
  3. Click Generate new private key
  4. Download the JSON file

Place the downloaded file inside your Laravel project:

storage/app/firebase/firebase-adminsdk.json
danger

⚠️ Do not expose this file publicly or commit it to version control.

4. Generate VAPID Key (Web Push)​

  1. Firebase Console → Project Settings
  2. Open the Cloud Messaging tab
  3. Scroll to Web Push certificates
  4. Click Generate key pair
  5. Copy the Public key

This public key is used as the VAPID key for browser notifications.

5. Firebase Configuration File (Laravel)​

Create or update the following file:

config/firebase.php
<?php

return [
    'credentials' => storage_path('app/firebase/firebase-adminsdk.json'),
    'project_id'  => 'restaurant-1f6bf',

    // Web Push VAPID key
    'vapid_key' => 'YOUR_VAPID_KEY_HERE',

    // Firebase Web App credentials
    'service_credentials' => [
        'apiKey'            => 'YOUR_API_KEY',
        'authDomain'        => 'YOUR_AUTH_DOMAIN',
        'projectId'         => 'YOUR_PROJECT_ID',
        'storageBucket'     => 'YOUR_STORAGE_BUCKET',
        'messagingSenderId' => 'YOUR_SENDER_ID',
        'appId'             => 'YOUR_APP_ID',
        'measurementId'     => 'YOUR_MEASUREMENT_ID',
    ],
];

6. Using VAPID Key in Frontend​

The VAPID key is accessed from Laravel config and used when requesting the Firebase Cloud Messaging token.

getToken(messaging, {
    vapidKey: "{{ config('firebase.vapid_key') }}"
});

Security Notes​

  • ✔ VAPID key is public and safe for frontend use
  • ❌ Admin SDK JSON must remain server-side only
  • ❌ Never expose service account credentials in JavaScript

Firebase Service Worker Configuration​

Firebase push notifications require a Service Worker to handle background notifications when the browser tab is closed or inactive. This configuration is done inside the firebase-messaging-sw.js file.

What is firebase-messaging-sw.js?​

The firebase-messaging-sw.js file runs in the browser background and is responsible for:

  • Receiving push notifications when the app is not open
  • Displaying system notifications
  • Handling notification click events

Because this file runs independently from Laravel and Blade templates, Firebase configuration values must be initialized directly inside it.

Service Worker Firebase Initialization​

Add the Firebase Web App credentials inside firebase-messaging-sw.js. These credentials are the same values used in the frontend Firebase configuration.

importScripts('https://www.gstatic.com/firebasejs/12.7.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/12.7.0/firebase-messaging-compat.js');

firebase.initializeApp({
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage(payload => {
    self.registration.showNotification(
        payload.notification.title,
        {
            body: payload.notification.body,
            icon: payload.notification.icon,
            data: payload.data,
        }
    );
});

Why are credentials added here?​

The Service Worker cannot access Laravel configuration files or environment variables. Therefore, Firebase Web credentials must be defined directly in this file or loaded via a public JavaScript configuration file.

Security Notes​

  • ✔ Firebase Web credentials are public and safe to expose
  • ✔ Required for background push notifications
  • ❌ Do not include Firebase Admin SDK credentials here
  • ❌ Never expose firebase-adminsdk.json in Service Worker

File Location​

public/firebase-messaging-sw.js

Ensure this file is publicly accessible so the browser can register the Service Worker correctly.