Web Notifications API

By  on  

Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the W3C felt the same way because they've created a Web Notifications API.  Here's how to use it!

The JavaScript

The first step is basic feature detection, as you would expect, and then you jump into the notification creation code:

if(window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission(function(status) {  // status is "granted", if accepted by user
		var n = new Notification('Title', { 
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		}); 
	});
}

Once you confirm the Notification API is supported, you must request notification access from the user.  If the status comes back as "granted", you can create a new notification with a title and body text.

Closing the notification is simple with the close method:

n.close();

I really like the idea of the browser providing native APIs for common UI components, but I do find it funny that each browser has a different look for notifications.  I do like the simplicity of the Web Notifications API though -- what do you think?

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.

  • By
    Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

  1. The things you can do with JS. This one I didn’t know. Thanks for sharing!! You can also add an image to it as well, right?

  2. new Notification(
        'Foo',
        {
            body : 'This is a foo notif',
            icon : 'path/to/icon.png'
        }
    )

    More options (including a handy rtl switch): https://developer.mozilla.org/en-US/docs/Web/API/notification

    • Ahh! Great! :D Thanks Mitchell!

  3. Andrew

    This would be amazing if this already worked on all mobile devices — using something like phone gap to wrap your JS application – you could use notifications with this built-in API :) Much easier than a lot of the hoops you have to jump through now.

    Thanks,

  4. W3C did well by putting together this JS code for web notification. I wonder if this would work across all the browsers?

  5. David

    Hmmmm…. Interesting. I’ll show this feature to our marketing department. They allways got some creative thoughts and come up with what to do

  6. Oleh

    Hi David, nice article! I made a little wrapper for window.Notification, maybe you can help make it better.
    https://github.com/drKraken/notification-fallback.js

  7. Interesting. The notifications time-out and disappear for Firefox (at least in 36.0.1) on Windows (and they have a megaphone icon), but for Chrome 40, there’s no icon, and they never disappear by themselves (only by clicking on the close button).

  8. yachris

    One slightly awful thing about this — Firefox saw fit to put the notification on *my other monitor*, probably because I have Firefox full-screen’d on this monitor. It seemed to disappear really fast too.

    As Ted Young writes above, it’s kind of unfortunate that you don’t get any control over when (and if!) it disappears. I’ve used the Pines Notify library successfully. It’s also quite easy to style to match your web site’s look.

  9. Interesting – I was clicking away not sure what was supposed to be happening – dual monitor setup and the notifications appear top right on my right hand monitor as opposed to top right of the monitor that the browser is in. On a Mac.

  10. Interesting. The notifications time-out and disappear for Firefox (at least in 36.0.1) on Windows (and they have a megaphone icon), but for Chrome 40, there’s no icon, and they never disappear by themselves (only by clicking on the close button).

  11. NO!!! I cannot use it because IE does not support it. Bummer!!!

  12. SB

    Oh… The web 2.0 (are we still on 2.0?)… the next desktop! :)
    PS: I knew things started changing the minute I saw Quake 3 ported to javascript inside a browser.

  13. How do I implement this server side, say in my live website?

  14. Jack

    Doesn’t work on Android Chrome browser… :-(

  15. Hi David,
    I would like to show notification without any browser open if new post or article published.
    Is it possible in this api?
    How can we do without any browser open ?

  16. Roberto

    Hi David,
    This notifications don´t work in chrome (android).
    You can try it with the ‘demo’ with this page.

  17. How to make the Web Notification API realtime running on my website?
    Do you have any suggestions? Thanks!

  18. shamshad

    Hi ,

    i want to create a notification like facebook, while user not open any website but notification come after time to time.if user one time allow notification.

  19. Miguel

    Any idea on how to run this in IE8+?

  20. Alexandra

    Hi, I made also a web notification that works pretty alike, I was trying to find a way to get rid of the button, so the notification of the subscribing will be activated only for entering in the web site, do you know how to accomplish this?

    thanks

  21. ahmads

    The Notification permission may only be requested from inside a short running user-generated event handler.

    in mozila browser, not showing pop request permission.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!