Web Notifications
Web Notifications allows users to get updates on a webpage even if they’re not looking at it, shown to them through small notification boxes, think growl. This opens up some great potential for the current web apps out there. When you get a new email it could popup a little notification much like our desktop email clients do now or your twitter page could let you know when new @replies have come in, the possibilities are endless.
Interaction with your web app no longer needs the focus of the user to be informed that something has occurred, I know I would find notifications very useful.
Support for this is in latest stable Chrome (25.0.1364.172) and Firefox Nightly (22.0a1).
You’ve got mail
I’ll go through a simple demo I have put together on how to setup and start using notifications today.
This is what a notification looks like using the Notification() method
Everyone loves the classic “you’ve got mail” voice, so let’s go through how to do that with Web Notifications.
A few things are happening here, for notifications to ever work you need to ask the user for permission. So we use the requestPermission()
method which gives us a callback function and passes in the status as the first argument. Once permission has been granted notifications can then be used. A few differences are Chrome won’t allow me to programmatically check for permssion and automatically show the notification whereas Firefox Nightly will.
<span class="nx">nw</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">"show"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">audio</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Audio</span><span class="p">(</span><span class="s2">"youvegotmail.mp3"</span><span class="p">);</span>
<span class="nx">audio</span><span class="p">.</span><span class="nx">play</span><span class="p">();</span>
<span class="p">},</span> <span class="kc">false</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">nw</span><span class="p">;</span>
};
Now we have permission (hopefully you allowed!) we can construct a new Notification to be shown to the user. Notifications is a constructor that takes one required argument and a second argument that allows you to alter a bunch of options.
- First argument is the Notification title
- The second argument has a few properties like icon, body and tag. See spec for full list
The icon
and body
parameters a pretty self-explanatory but tag
not so much. Basically tag
allows you to supply an id to a Notification so you can reuse that notification rather than create a new one to display every time.
The next bit of code allows us to attach to certain events that the Notification will fire, in our case we want to play audio when it’s shown. There are three other events onclick, onclose and onerror to handle other scenarios.
Looks promising
Web notifications do look like a promising addition to the browser land and can create some really useful feedback to a user. With today’s web applications pushing the limits of the current technology available in the browser, I’m sure many developers will embrace web notifications in clever and exciting new ways.