DEV Community

Cover image for setting up browser notification
Hillary Chibuko
Hillary Chibuko

Posted on

setting up browser notification

 Setting up browser notifications are in every way crucial in web application development....
Enter fullscreen mode Exit fullscreen mode

most times we do need to pass valuable informations to application users in order to decide our next step.

The process of implementing web notifications is made so easy with the browser notification api...

//first of all we check if the browser supports notification

if(!window.Notification){
//you could update the user interface if you like to inform the user that their browser does not support notifications

console.log("browser notification not supported")
}

// now we try to display a notification

const showNotification = () =>{

const title =" hey there man, how's it going ";
const options = {
    body:" would you like to recieve weekly updates from us",
    icon:"./assets/logo.png"
}
const notify = new Notification(title,options)

//optionally you could decide to clear the notification dialog after some time
Enter fullscreen mode Exit fullscreen mode

setTimeout(()=>{
notify.close();
},10 * 1000)
}

//now we check the permission status

if (Notification.permission === "granted")
{
showNotification();
}

//this basically runs if the user neither accepted nor denied the request

else if (Notification.permission !== "denied"){
Notification.requestPermision().then(access => {
if(access === "granted"){
showNotification()
}
else{
// you could inform the user that accepting the notification request is neccessary for whatsoever reason

console.log('permission denied');
}
})
}

and thats all you need to start implementing browser notifications in your web application...

note: web notifications only works on a secure https, something of this sort "file:///C:/Users/HILLARY/Notify.html" would not work

Top comments (1)

Collapse
 
cuellar22 profile image
RAUL CUELLAR MORENO • Edited

Hello, I am new in REACT. Which lines are Java and Which are React? Could I included in the body?
Thanks a lot