Can I get detailed step-by-step for sending "Web Push Notification" from Azure Notification Hub ("Test push" is fine to start with) to a PWA created from Power Pages?

Question

Can I get detailed step-by-step for sending "Web Push Notification" from Azure Notification Hub ("Test push" is fine to start with) to a PWA created from Power Pages? I need all code on client side including where to find values for apiKey and appId in the following code.

  // Initialize Firebase
  const firebaseConfig = {
      apiKey: "YOUR_FIREBASE_API_KEY",
      projectId: "YOUR_PROJECT_ID",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
  };
  firebase.initializeApp(firebaseConfig);

  const messaging = firebase.messaging();

Answer 1

Hi @MayankBakshi-0836 ,

Welcome to the Microsoft Q&A Platform!

To send web push notifications from Azure Notification Hub to a Progressive Web App (PWA) built on Power Pages, you’ll need to use both Firebase Cloud Messaging (FCM) and Azure Notification Hub.
Set Up Firebase for Web Push Notifications

Create a Firebase Project:

• Go to Firebase Console.
• Select Add project and create a new Firebase project.
• Enable Cloud Messaging
• Go to Project Settings > Cloud Messaging tab.
• Copy Server key and Sender ID for later use.
• Get Firebase Configuration:
• In Project Settings under General tab, go to Your apps section.
• Click Add app > Web to register your app.
• Note apiKey, projectId, messagingSenderId, and appId from the Firebase config object.
• Create Notification Hub
• In Azure portal, create a Notification Hub in your preferred resource group.
• Link Firebase to Notification Hub
• In Notification Hub, go to Settings > Push Notification Service > Google (GCM/FCM).
• Enter your Firebase Server key.
• Add Firebase Code to Your PWA

importScripts("https://www.gstatic.com/firebasejs/9.1.2/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.1.2/firebase-messaging-compat.js");
const firebaseConfig = {
    apiKey: "YOUR_FIREBASE_API_KEY",
    projectId: "YOUR_PROJECT_ID",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
async function requestNotificationPermission() {
    const permission = await Notification.requestPermission();
    if (permission === "granted") getFCMToken();
}
function getFCMToken() {
    messaging.getToken({ vapidKey: "YOUR_PUBLIC_VAPID_KEY" })
        .then((currentToken) => {
            if (currentToken) console.log("FCM Token:", currentToken);
        })
        .catch((err) => console.error("Error retrieving token:", err));
}
messaging.onMessage((payload) => {
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: payload.notification.icon,
    };
    self.registration.showNotification(notificationTitle, notificationOptions);
});
requestNotificationPermission();

• Values for Firebase Config
• Replace "YOUR_FIREBASE_API_KEY", "YOUR_PROJECT_ID", "YOUR_SENDER_ID", and "YOUR_APP_ID" with values from Firebase
• Register the FCM Token with Azure Notification Hub
• Send Token to Azure Notification Hub:
• Use the Notification Hub REST API or Azure SDK in your backend to send the token.
• Alternatively, use Test Send in Azure Notification Hub.
• Testing Push Notifications:
• In Notification Hub, go to Test Send > Platform as Web (WNS).
• Enter the registration ID (FCM token) and a test message.
• Deploy and Test
• Deploy the PWA on Power Pages.
• Use the Test Send feature in Azure Notification Hub to verify notifications are working.
• This completes the setup for sending web push notifications from Azure Notification Hub to your PWA using Firebase. If the answer is helpful, please click "Accept Answer" and kindly upvote it.