Description : In this post how to display notification in website using javascript. this notfication display if your browser is open or minimized. write below javascript for display browser notfication
Step 1 : add below javascript for notfication display
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Step 2 : add below javascript code for display notfication
<script>
$(document).ready(function () {
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
});
});
function NotifyMe(title, desc, url) {
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
else {
var notification = new Notification(title, {
icon: url,
body: desc,
});
/* Remove the notification from Notification Center when clicked.*/
notification.onclick = function () {
window.open(url);
};
/* Callback function when the notification is closed. */
notification.onclose = function () {
console.log('Notification closed');
};
}
}
</script>
Step : Add HTML button if click on button it call function NotfiyMe. here 3 parameter for set dynamic text in notfication 1st is notficiation title, 2nd is description of notficiation and last 3rd is URL for display image in notification
<button onclick="NotifyMe('Browser Notification', 'This is testing browser notification.','https://png.icons8.com/color/260/comedy.png')">Display Notification</button>
- Below screenshot for Notification looks like
Step 1 : add below javascript for notfication display
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Step 2 : add below javascript code for display notfication
<script>
$(document).ready(function () {
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
});
});
function NotifyMe(title, desc, url) {
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
else {
var notification = new Notification(title, {
icon: url,
body: desc,
});
/* Remove the notification from Notification Center when clicked.*/
notification.onclick = function () {
window.open(url);
};
/* Callback function when the notification is closed. */
notification.onclose = function () {
console.log('Notification closed');
};
}
}
</script>
Step : Add HTML button if click on button it call function NotfiyMe. here 3 parameter for set dynamic text in notfication 1st is notficiation title, 2nd is description of notficiation and last 3rd is URL for display image in notification
<button onclick="NotifyMe('Browser Notification', 'This is testing browser notification.','https://png.icons8.com/color/260/comedy.png')">Display Notification</button>
- Below screenshot for Notification looks like
