HTML5 Notifications

Fork me on GitHub

Follow us on Twitter and Facebook for similar experiments.

Not supported

Sorry, to keep it simple and prevent exceptions, this demonstration uses the vendor-specific window.webkitNotifications, which of all the Webkit-browsers is currently only supported by Google Chrome.

For information on the use of window.mozNotifications, check Mozilla’s wiki. It’s very similar to Webkit’s implementation, but lacks HTML notifications.

Blocked

Sorry, you’ve blocked notifications for this page. Copy the url below to your address bar, remove the block and try again :).

Request permission

Notifications are different from regular pop-ups in that they require the user’s permission to be shown.

Notice that the request permission dialog only shows after user interaction (e.g. clicking a button). If you’re adding this to a Chrome Extension, just add the ‘notifications’ permission and you’re all set.

Show notification

HTML5 Notifications come in two flavors: plain text and HTML. Plain text allows you to customize a couple of parameters, HTML shows any .html file you want as a notification.

The examples below are very simple. I didn’t even add a timeout to make them disappear after a set amount of time (which you probably should).

Plain text

Waiting for submit..

HTML

This seems to have been deprecated July 13th, 2012.

Waiting for submit..