Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 21, 2021 11:39 pm GMT

setting up browser notification

 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


Original Link: https://dev.to/dev_hills/setting-up-browser-notification-4dib

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To