Setting Up Web Push Notifications

Setting Up Web Push Notifications with Firebase Cloud Messaging (FCM)

Overview

This guide provides step-by-step instructions to configure Web Push Notifications using Firebase Cloud Messaging (FCM) for Organon. By following these steps, users can enable push notifications in their web applications and integrate FCM for seamless message delivery.

---

Prerequisites

Before proceeding, ensure you have:

• A Firebase project set up in the Firebase Console.

• A web application with HTTPS enabled (FCM requires HTTPS for push notifications).

• Access to the Firebase Cloud Messaging credentials.

---

Step 1: Generate VAPID Keys

1. Open the Firebase Console and select your project.

2. Go to Project Settings > Cloud Messaging.

3. Scroll to the Web configuration section.

4. Click Generate Key Pair under the VAPID Key section.

5. Copy the generated VAPID Public Key and VAPID Private Key.

---

Step 2: Configure Firebase in Your Web Application

1. Add Firebase SDK to your project.

script src="https://www.gstatic.com/firebasejs/10.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.3.0/firebase-messaging.js"></script>

1. Initialize Firebase with your configuration:

const firebaseConfig = {
    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"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

---

Step 3: Implement the Service Worker

1. Create a firebase-messaging-sw.js file in the root directory of your project.

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


firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();


messaging.onBackgroundMessage((payload) => {
    console.log('Received background message ', payload);
    self.registration.showNotification(payload.notification.title, {
        body: payload.notification.body,
        icon: payload.notification.icon
    });
});

1. Register the service worker in your index.js file.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then((registration) => {
            console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch((err) => {
            console.log('Service Worker registration failed:', err);
        });
}

---

Step 4: Request User Permission

1. Add the following code in your main JavaScript file.

function requestNotificationPermission() {
    Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
            console.log('Notification permission granted.');
            return messaging.getToken();
        }
    }).then((token) => {
        console.log('FCM Token:', token);
    }).catch((error) => {
        console.error('Error getting permission:', error);
    });
}

1. Call requestNotificationPermission() when users enable notifications.

---

Step 5: Configure Web Push Notifications in Organon

To send notifications from Organon, users must upload their Firebase Web Push credentials.

1. Open Organon and navigate to Push Notification Settings.

2. Select the Web tab.

3. Enter the VAPID Private Key(Navigate to Cloud Messaging of firebase -> Web configuration -> copy Key pair

4. Upload the firebase-messaging-sw.js file.(Navigate to general settings of firebase-> to your web apps-> select config-> copy the object present in curly braces -> save the file as json and upload that file)

5. Click Enable Web Push Configuration.

6. Save the configuration.

---

Step 6: Test Web Push Notifications

Obtain Firebase Cloud Messaging Token

1. Run your web app and call requestNotificationPermission().

2. Copy the generated FCM token.

Send a Test Notification from Firebase Console

1. Go to Firebase Console > Cloud Messaging.

2. Click Send your first message.

3. Enter a notification title and message.

4. Select Send to a test device.

5. Paste the copied FCM token.

6. Click Send Message and check if the notification appears.

---

Step 7: Deploy and Monitor Notifications

Once testing is successful:

• Use Organon’s campaign feature to send push notifications.

• Monitor delivery rates and engagement using Organon’s analytics dashboard.

• Optimize message content for better user interaction.

---

Troubleshooting

• Ensure the Firebase configuration matches your project settings.

• Verify that your service worker is correctly registered.

• Check Organon’s notification logs for errors.

• Ensure the user has granted permission for notifications.

Following these steps will enable web push notifications via Firebase Cloud Messaging and allow sending notifications directly from Organon.