MOCKSTACKS
EN
Questions And Answers

More Tutorials









Javascript Notifications API

Requesting Permission to send notifications

We use Notification.requestPermission to ask the user if he/she wants to receive notifications from our website.


Notification.requestPermission(function() {
 if (Notification.permission === 'granted') {
 // user approved.
 // use of new Notification(...) syntax will now be successful
 } else if (Notification.permission === 'denied') {
 // user denied.
 } else { // Notification.permission === 'default'
 // user didn’t make a decision.
 // You can’t send notifications until they grant permission.
 }
});

The .requestPermission method can also return a promise when handling the user's decision for
granting permission


Notification.requestPermission().then(function(permission) {
 if (!('permission' in Notification)) {
 Notification.permission = permission;
 }
 // you got permission !
 }, function(rejection) {
 // handle rejection here.
 }
);

Sending Notifications

After the user has approved a request for permission to send notifications, we can send a simple notification that says Hello to the user:


new Notification('Hello', { body: 'Hello, world!', icon: 'url to an .ico image' });

Output


Closing a notification

You can close a notification by using the .close() method.


let notification = new Notification(title, options);
// do some work, then close the notification
notification.close()

You can utilize the setTimeout function to auto-close the notification sometime in the future


let notification = new Notification(title, options);
setTimeout(() => {
 notification.close()
}, 4000);

The above code will spawn a notification and close it after 4 seconds.


Notification events

The Notification API specifications support 2 events that can be fired by a Notification.
1. The click event.
This event will run when you click on the notification body (excluding the closing X and the Notifications configuration button).
Example:


notification.onclick = function(event) {
 console.debug("you click me and this is my event object: ", event);
}

2. The error eventThe notification will fire this event whenever something wrong will happen, like being unable to display


notification.onerror = function(event) {
 console.debug("There was an error: ", event);
}


Conclusion

In this page (written and validated by ) you learned about Javascript Notifications API . What's Next? If you are interested in completing Javascript tutorial, your next topic will be learning about: Javascript Vibration API.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.