Categories
HTML5 Desktop Notifications
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
,denied
anddefault
.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.
- HTML Imports
- HTML Templates
- Single-Page Apps and HTML5 pushState
- Detecting device location with JavaScript
If you have any questions or toughts about the HTML5 Desktop Notifications, leave a comment below. Ah, don't forget to share this article.
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed