How to implement firebase notification / push notification on php, wordpress any website using javascript

Insert this code before closing body tag

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "";
  import { getAnalytics } from "";
  import { getMessaging, getToken } from "";

  // TODO: Add SDKs for Firebase products that you want to use

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyBql0gSNeGoc4tS0rU__tfQ3A",
    authDomain: "",
    databaseURL: "",
    projectId: "aditya-bd2=972",
    storageBucket: "",
    messagingSenderId: "730776396949",
    appId: "1:730776396449:web:ff1174fa2aac6dfbdc46e0"
  //Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  const messaging = getMessaging();

  getToken(messaging, { vapidKey: 'BM-QUwBccFqQAlfA2XuYNXVb7RttdqHwfv9e2a_XwQ0QoQ05VI25JDVkGhjh_bEJl9fONflY6tPvQ' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...

 // console.log(messaging);
 // console.log(app);

Disabling “Use Socket For PHP-FPM” did the trick.

Create two file init.js and firebase-messaging-sw.js store it in root of website

Content for init.js

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      apiKey: "AIzaSyBql0g4w_K19oc4tS0rU__tfQ3A",
      authDomain: "",
      databaseURL: "",
      projectId: "aditya-bd972",
      storageBucket: "",
      messagingSenderId: "730776396449",
      appId: "1:730776396449:web:ff1174fa2aac6dfbdc46e0"
    //Initialize Firebase
  // Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(;  // "[DEFAULT]"

Content for firebase-messaging-sw.js

// Import and configure the Firebase SDK
// These scripts are made available when the app is served or deployed on Firebase Hosting
// If you do not serve/host your project using Firebase Hosting see

var messaging = firebase.messaging();

 * Here is is the code snippet to initialize Firebase Messaging in the Service
 * Worker when your app is not hosted on Firebase Hosting.
 // [START initialize_firebase_in_sw]
 // Give the service worker access to Firebase Messaging.
 // Note that you can only use Firebase Messaging here, other Firebase libraries
 // are not available in the service worker.
 // Initialize the Firebase app in the service worker by passing in the
 // messagingSenderId.
   'messagingSenderId': 'YOUR-SENDER-ID'
 // Retrieve an instance of Firebase Messaging so that it can handle background
 // messages.
 const messaging = firebase.messaging();
 // [END initialize_firebase_in_sw]

// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// [START background_handler]
messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  var notificationTitle = 'Background Message Title';
  var notificationOptions = {
    body: 'Background Message body.',
    icon: '/favicon.ico'

  return self.registration.showNotification(notificationTitle,
// [END background_handler]

Login in and send notification from firebase panel

Leave a Reply