## System setup for push notification

As mentioned in the topic, we will here see how to setup up our django and react application and how we can send push notification. 

We will  work with **Web Push Notification** where a website or a web application asks for the permission of push notification when opened for the first time and if granted, we can send notifications. We will see the process in detail in later part ( next blog ) of this topic.

There are many push notifications service provider available, we will use [Firebase](https://firebase.google.com/), and [Cloud Messaging](https://firebase.google.com/docs/cloud-messaging)  feature of firebase because it is free and easy to setup.

I will use next.js as my frontend and django as my backend for the  setup, you can follow along and use a standard react.js app also.

### Frameworks and Packages used -

#### Frontend - 

```
"react": "18.2.0",
"next": "13.1.1",
"axios": "^1.2.2",
"firebase": "^9.15.0",
```

#### Backend - 


```
Django==4.1.4
djangorestframework==3.14.0
fcm-django==1.0.12
firebase-admin==5.4.0
```

### Understanding how web push notification works -

**What is a Web Push Notification**?

A push notification is a message or notification that pops up on a user device, mobile, laptop or any other device whether or not the user is using the website.  It can be used to send any type of information. [More detail](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) can be fround here.

**How user recieve a message even if the website is not in foreground?**

There is a think called [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API), which makes it possible. You can read the technical document from the link provided but I will try to explain it in simple term.

**What is a Service Worker?**

Service worker is part of modern web technology, we as a developer code it, it is part of the website, the browser nowdays have evolved a lot and browsers provide a fearture where service workers can be installed directly on the browser, now this service worker sits in between our website and our backend server and is always in running, active state, so even if our website is not in the foreground and we send a notification to our website, the service worker can understands it and work upon it. 

This is my explanation related to this blog and topic and there is a lot other detail to service worker, do have a detail understanding of the [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) from the technical documentation.

#### My approach to web push notification -
- Setup firebase and create a cloud messaging project
- Ask for push notification permission
- Send the generated key to the server
- Send notification from the server

This is just a top level scenario, I will cover each detail required to send push notifications in other blogs of this topic.


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 see the packages and detail of setting up push notifications in our django and react apps. We will understand the complete logic and data flow here.  

Overview and project setup for push notification

Contact Me

I want to hear from you