WEB NOTIFICATIONS
Thanks to HTML5 specification modern browsers are able to display desktop notifications. If you ever have seen such a popup, that is because user-agent asks for permission to display web notifications from current domain.
Granting permission the domain for notifications, allows the website to display notifications, that looks like this:
The icon at the bottom right corner of the notification, allows you to manage the notification exceptions.
In Chrome, navigate to Settings » Privacy » Content settings… » Notifications » Manage exceptions…
NOTIFICATION API
- How to check whether notifications are supported:
if ('Notification' in window) {
} - To find out the current permission to display notifications, use the permission static property. Possible values are:
granted,deniedanddefault.if (Notification.permission !== 'denied') {
} - How to ask for permission:
Notification.requestPermission(function (permission) {
if (permission === 'granted') {
// create notification
}
}); - How to create notification:
var note = new Notification('Hooray!', {
icon: 'https://example.com/notification-icon.png',
body: 'Lorem ipsum dolor sit amet.'
}); - The notification object supports onclick and onerror event handlers.
note.onclick = function(e) {
e.preventDefault();
window.open('https://zinoui.com', '_blank');
} - How to close notification:
note.close();
BROWSER COMPATIBILITY
Edge 14+, Firefox 22+, Chrome 22+, Safari 6+, Opera 25+
CONCLUSION
Web notifications are great addition to the web platform and could be used practically anywhere. That makes them extremely useful.