## Let us create the service worker for firebase push notification -

As we know we are using next.js so the first-step is to create a file called **firebase-messaging-sw.js** in the public folder, the aim is to make this directly available at domainname/filename.

** **the filename should be exactly the same**

### And the content of the file will be - 

- Import the firebase scripts

```
importScripts("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js");
importScripts(
  "https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"
);
```
** **make sure the script version is same as the firebase package we installed with npm**

- Define your firebase config as done in [second part](https://www.ranuvijay.me/blogs/setup-next-js-react-js-and-initialize-firebase-app) of this topic.

```
const firebaseConfig = {
  // your data
};
```
- Initialize firebase app and messaging 

```
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();
```
-  Show notification when app is not in foreground

The name of funbction should be **onBackgroundMessage**

```
messaging.onBackgroundMessage(function (payload) {
  console.log("Received background message ", payload);
  // Customize notification here
  const { title, body } = payload.data;
  const notificationTitle = title;
  const notificationOptions = {
    body: body,
    icon: "/icons/384.png",
    vibrate: [200, 100, 200],
    image: "/notification.webp",
    badge: "/notificationBadge.png",
    actions: [
      {
        action: "aboutMe",
        title: "About Me",
        type: "button",
        icon: "/user.svg",
      },
      {
        action: "contactMe",
        type: "button",
        title: "Contact",
        icon: "/mail.svg",
      },
    ],
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});
```

self.registeration will be this particular service worker and here we
use the [showNotification](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification)
method of service worker registeration to show our notification.

![Screenshot 2023-03-17 163139.jpg](https://api.ranuvijay.me/uploads/Screenshot_2023_03_17_163139_1e6eee9fbf.jpg)

### Check the action buttons

From the code you can see that I defined two actions named **aboutMe** and **contactMe**, and then from the image above you can check how this looks.

- At last define the click events for action buttons - 

Here we will write our eventlistner on notificationclick event of the notification and based on actions defined above we can take the user to the defined urls.

```
self.addEventListener(
  "notificationclick",
  function (event) {
    event.notification.close();
    if (event.action === "aboutMe") {
      clients.openWindow("/");
      console.log("aboutMe clicked");
    } else if (event.action === "contactMe") {
      clients.openWindow("/contactMe");
      console.log("contactMe clicked");
    }
    else {
      console.log("hhhhhhhhhhhhhhhhhhhhhhhhhhhhh");
      // clients.openWindow("/");
    }
  },
  false
);

```
Follow [other blogs](https://www.ranuvijay.me/blogs/topics/push-notification-with-django-react-js-and-firebase) on push notification topic.


Follow [next.js](https://www.ranuvijay.me/blogs/categories/next-js) blogs.

Follow [react.js](https://www.ranuvijay.me/blogs/categories/react-js) blogs.

Follow [other topics](https://www.ranuvijay.me/blogs#topics)

Follow [other categories](https://www.ranuvijay.me/blogs#categories)

You can fill the form and write to me, if you are in any doubt.

**Thank You!!**

We will create our own service worker, and will define backgroundShowMessage method so that our service worker can show notification when our app is not in foreground.

Create service worker and method to show background notification

Contact Me

I want to hear from you