A Web Standard for Notifications using JavaScript and HTML5

DZone 's Guide to

A Web Standard for Notifications using JavaScript and HTML5

· Web Dev Zone ·
Free Resource
These days, notifications are a feature that is baked into mobile platforms, and available through third party applications on the desktop (i.e. Growl, IE9 Pinned Sites).  If you're looking also for cross platform methods for implementing notifications, there's good news. There is currently a Web Notifications spec evolving in a W3C working group.  Chris Kalani explains in a blog post today:

In the near future, we should be able to take advantage of this kind of functionality in our web apps as well. The Web Notifications specification provides us with this ability. This defines what are known as simple notifications. With simple notifications it is possible to create a notification which contains an icon, title, and body test. This can then be displayed by the notification system that the browser/user-agent hooks into. The spec doesn’t define this, so the user-agent can either roll its own, or use an existing system made available by the operating system.  - Chris Kalani

Right now the spec is very new, and it's only been implemented in Chrome and Mobile Firefox (and those two implementations are NOT compatible).  However, if you're interested in getting a general idea for how these standard web notifications will work and would like to see a demo, you should read Chris' brief tutorial on the emerging topic.

Still, it'll probably be several years before the spec can compete with some deeply integrated platform notifications like you see on the mobile platforms or with IE site pinning.  I'd suggest you get acquainted with those first, since notifications are showing time and time again that they really help drive return engagement with an app.

Source: http://dstorey.tumblr.com/post/11597158114/webnotifications


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}