setting up browser notification

#css #html #javascript #react

 Setting up browser notifications are in every way crucial in web application development....

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

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