This content originally appeared on DEV Community and was authored by Hillary Chibuko
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
This content originally appeared on DEV Community and was authored by Hillary Chibuko
Hillary Chibuko | Sciencx (2021-07-21T23:39:01+00:00) setting up browser notification. Retrieved from https://www.scien.cx/2021/07/21/setting-up-browser-notification/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.