## Let us understand the concept

### Permission -

As we have seen in this [blog](https://www.ranuvijay.me/blogs/overview-and-project-setup-for-push-notification-react-js-and-django), push notification is a message that user recieve whether the website is in foreground or not. Now this can be miss used and a whole lot of messages can be sent to users, So push notification system is designed in a way that -
- Users accetps to recieve push notifications
- Website runs over HTTPS
- If a user rejects the permission, we should not ask again.

To test things in local system, you can google search about **chrome://flags/#unsafely-treat-insecure-origin-as-secure** 

Before looking for how we can get user permission, we should know about [Navigator](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), you can read the technical documention from the link provided, but in simple words it provides us the information about the user agent, means about the browser and its capabilities, and so navigator is a [window property](https://developer.mozilla.org/en-US/docs/Web/API/Window). 

### Steps - 

#### - Check if service worker is available with navigator

We also discussed that we will  deal with push notification with respect to service worker, so before asking for permission request we should check the availability of service worker. 

```
if ("serviceWorker" in navigator)
{
  // service worker available
}
```

#### - Check if notification is supported at window

```
if ("Notification" in window)
{
  // notification supported
}
```

#### - Then ask for notification permission


```
if ("serviceWorker" in navigator && "Notification" in window) {
  Notification.requestPermission().then((permission) => {
    if (permission === "granted") {
      // permission granted
    }
  });
}
```
You can read the detail about ways to ask for  [permission](https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission) here. The code above will ask for permission all the time, even if user rejects it for the first time, also I have not managed the else part of the code here, I will manage all these in next blog where we will crteate our own service worker and request a permission.  This was just to explain the fundamentals.

### Subscription - 

By subscription I mean to subscribe to [PushManager](https://developer.mozilla.org/en-US/docs/Web/API/PushManager), which return a **promise** containing detail of push subscription. You can read the [technical document](https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe) here.

**In simple words** this promise contrain information which can be sent to our server, the backend system, we can save this value and can send push notification to this subscription later. This promise identifies the frontend app, website which subscribed to push notification and we can send push notification to this website. 

### Steps - 

Assume this to be the dummy code, in next blog I will write a detail inforrmation. This is just to get you familiar with the subscription flow.

#### - Register a service worker

```
navigator.serviceWorker.register("serviceworker.js");
```

#### - Check if service worker is ready 

```
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  // service worker ready 
})
```

#### - Subscribe to push manages


```
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  serviceWorkerRegistration.pushManager.subscribe().then(
    (pushSubscription) => {
      console.log(pushSubscription.endpoint);
      // send this pushSubscription to the backend system
    });
});
```
**pushSubscription** is the main thing here, from our backend system we will use this to send notifications to our frontend app.

### Notification -

As discussed earlier we will again need registeration of service worker to show notification. 

**Point to remember** - Push Service and Notification are two different thing. Push service allows a app to revieve push messages but it will not how anything to the user, we will have to use the notification. We have seen earlier how to ask permission for push service and subscribe to  it. 

**showNotification** method of service worker registeration is what we need to show a notification. [Complete detail](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification) can be found here. 

### Steps -

- Install service worker as shown in subscription method.
- Wait for service worker to be ready.
- Then we can code as
 
```
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  serviceWorkerRegistration.showNotification("Title", Message Body);
});
```

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!!**


Here we will understand how we to request a permission, how to subscribe and how to show notification with respect to push messages.

Understanding permission, subscription and notification

Contact Me

I want to hear from you