We need to show the push messages to the users in both the cases, that is when our web app is in the background and when user is actually using our web app. 


## Our App is in the Background

We have learned before that even if our web app is in the background our service worker is all the time active and listinging to the events of the web app and so we will use the same feature of service worker to listen to the recieveing messages and show it to the users, when our app is not being used and is in the background.

 As we also saw previously that we have to create an empty file named firebase-messaging-sw.js, so we will ue the same .
 
 - Import the script 
```
importScripts("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js");
importScripts(
  "https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"
);
```
- Define the config
```
export const firebaseConfig = {
  apiKey: "value",
  authDomain: "value",
  projectId: "value",
  storageBucket: "value",
  messagingSenderId: "value",
  appId: "value",
  // measurementId: "G-QYMCW288RS"/,
};
```
- register the app and messaging
```
firebase?.initializeApp(firebaseConfig);
const messaging = firebase?.messaging();
```
- Write the onBackgroundMessage function -
```
messaging?.onBackgroundMessage(function (payload) {
  console.log("Received background message ", payload);
  const title = payload?.notification?.title;
  const body = payload?.notification?.body;
  const image = payload.notification.image;

  const notificationOptions = {
    body: body,
    icon: "/icons/384.png",
    vibrate: [200, 100, 200],
    image: image ? image : "",
    badge: "/notificationBadge.png",
    actions: [
      {
        action: "meaning",
        title: "Open",
        type: "button",
        // icon: "/user.svg",
      }
    ],
  };
  self?.registration?.showNotification(title, notificationOptions);
});
```
- Write the notificationclick event handler
```
self.addEventListener(
  "notificationclick",
  function (event) {
    event.notification.close();
    if (event.action === "meaning") {
      clients.openWindow("/");
    } else {
      console.log("clicked elsewhere");
      clients.openWindow("/");
    }
  },
  false
);
```
It reads the actions name and then we can do tasks based on actions

## When users are using the app

In permission file we have already imported onMessage from firebase. so now we can use the same in our permission method

add this function


```
  onMessage(messaging, (payload: MessagePayload) => {
    const title = payload.notification?.title;
    const body = payload.notification?.body;

    const notificationOptions = {
      body: body,
      icon: "/icons/384.png",
      vibrate: [200, 100, 200],
      image: "/notification.webp",
      badge: "/notificationBadge.png",
    };
    navigator?.serviceWorker
      ?.getRegistration("/firebase-messaging-sw.js")
      ?.then((registration) => {
        registration?.showNotification(
          title ? title : "Notification Title",
          notificationOptions
        );
      });
  });
```

You can go to firebase console and send a test message to check.

In the next part we will see how to setup our backend and send send notifications to users.

[Link](https://www.ranuvijay.me/blogs/setting-up-the-backend) of the next part.

Thanks!

We will see how we can show the push notification to the users in both cases, that is, when our app is in the background or when the user is using the app. 

Show Push Messages to the Users

Contact Me

I want to hear from you