Here we will see how we can check for the notification facility available in the browser and how can can request a permission.

Now, this is also of two types, 

- You might have seen that some website directly show the (below image) request prompt

![aq.png](https://api.ranuvijay.me/uploads/aq_d9c9e172a1.png)

- And in some website it is a two step process. first we see a user generated prompt and if accepted then we see the actual notification prompt.

![Screenshot from 2024-08-18 20-14-54.png](https://api.ranuvijay.me/uploads/Screenshot_from_2024_08_18_20_14_54_55bb59f325.png)


The image in the first one is the actual notificaiton prompt of the browser and if accepted we allow for the notification. 

In the second case only after a user clicks on Accept we can call our permission function.

The reason we see the second case is because some of the browser does not allow for directly showing a notificaion prompt for exampe Firefox and the reason is that this showld be a user drivern event, after clicking a button in most cases.   

Now, This are the steps to check for availability of the notification service in the broser

- Notification in window
- serviceWorker in navigator

and so our code can be - 


```
 if ( "serviceWorker" in navigator && "Notification" in window) {
  Permission();
 }
```
here Permission is a function written in a different file and is imported here at the top. 

[Link](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) for navigator

and this is how we request a Notification Permission- 


```
  Notification?.requestPermission()
    .then((permission) => {
    // do something with the granted permission
    })
    .catch(()=>{
      console.log("error in request permission")
    })
```

the return value can be granted or rejected

It is important to note that since I'm using Next.js and SSR, Window and Navigator object is not available at the server side and we can not directly import our permission file and can also not check for the permission availability at the broswer. 

The answer -> 

in our layout.tsx file which is a server component we can dynamically import a .tsx file with ssr set to false, for exampe suppose we have a file called checkForPermission.tsx so , we can import this file in our layout as 


```
import dynamic from "next/dynamic";
const CheckForPermission = dynamic(() => import("./fileLocation"), {
  ssr: false,
});
```
and in CheckForPermission, we can check whether navigator and serviceWorker is available or not, if available we can call our permission function. and in that permission function we can request for Notification.requestPermission() 

In Next Part we will install service worker and subscribe to pushManager

[Link](https://www.ranuvijay.me/blogs/install-service-worker-and-ssubscribe-to-pushmanager) of the next part.

Thanks!


We will see how we can request notification permission and if a notification facility is available on the browser.

Availability of Notification and Notification Permission

Contact Me

I want to hear from you