HTML5 Web Notifications

Status as of 2012.12: CHAOS!

Crome:

Chrome has implemented the old Webkit API for some time. The usage seems not to be wide spread, besides Google services.
Chrome 23 (and maybe earlier) has partially implemented the W3C API too. But not all W3C notification functions are implemented: window.Notification.requestPermission is defined, but crashes when called.
But W3C new Notification works with all extended features, with the "tag" option which enables updates of notifications.
Chrome can mix Webkit and W3C APIs: use Webkit where needed, but W3C new Notification.
Chrome can call the W3C API but ondisplay instead of onshow has to be called the Webkit way.

Safari 6+ (=5.2beta):

Safari can use notifications only with OSX 10.8+. Older versions of OSX than 10.8 and older versions of Safari than 6.0 don't support Web Notifications. OSX 10.8 got the same Notification Center that iOS 5 has brought to the users. This shows popups for some seconds, then lists the notification in a list form in the Notification Center, as the user can configure in detail.
Safari uses both APIs too: W3C (documented by Apple) and Webkit, almost compatible to Chrome. Almost!!
Safari triggers onshow instead of ondisplay with both APIs. Old Script from Chrome cannot be used without adaptation!

Code:

Test every function with: typeof window.webkitNotifications.createNotification == 'function'
But some functions are declared within Chrome, and still crash when called. In this case "browser detection" must be preferred over "feature detection". Using Webkit only, when possible, instead of W3C would downgrade to less functions.

Supported as of 2012.12:

• OK: Chrome (tested with Chrom 17 and 23 on OSX 10.7 and 10.8)
• OK: Safari 6 (= 5.2 beta) & OSX 10.8
• OK: Chrome for Android 18
• KO: iOS (6.01)
• Tests: caniuse.com/notifications

Chrome 17, Chrome 23 & OSX 10.7:

Notifications are queued, the first 3 are shown as PopUps.
When there are more notificatios than displayed, the next one out of the queue is displayed only after after the user closes one of the 3 visible notifications
When a notification in the queue is finally displayed, it receives the ondisplay event.
The notifications are still displayed, after the page is closed.

Chrome 17 & OSX 10.7:

Compatibility Webkit:

• OK: webkitNotifications.checkPermission
• OK: webkitNotifications.requestPermission
• OK: webkitNotifications.createNotification
• OK: Webkit ondisplay, onclick, onclose
• OK: Webkit show() required
• OK: Webkit cancel()

Compatibility W3C:

• KO: W3C

Chrome 23 & OSX 10.7 - 10.8.2:

Chrome 23 understands both APIs: W3C and Webkit.
Chrome uses the W3C "tag" parameter and replaces a notification, even in the Notification Center.

Bugs:

• BUG: the function Notification.requestPermission() is defined, but Chrome crashes when it calls Notification.requestPermission(). Chrome can use webkitNotifications.requestPermission() und use the W3C Notifications further on!
• BUG: Chrome 23 does not understand onshow and needs ondisplay even for W3C notifications!

Compatibility Webkit:

• OK: webkitNotifications.checkPermission
• OK: webkitNotifications.requestPermission
• OK: webkitNotifications.createNotification
• OK: Webkit ondisplay, onclick, onclose
• OK: Webkit .cancel()

Compatibility W3C:

• KO: W3C window.Notification.permissionLevel
• CRASHES: W3C window.Notification.requestPermission - even while it is defined!
• OK: W3C window.Notification
• KO: W3C onshow
• OK: NO W3C Standard: ondisplay
• KO: W3C onshow, onclick, onclose - attached to W3C Notification options parameter (new Notification("..",{onshow: function() {} })
• OK: NO W3C standard: ondisplay, onclick, onclose attached to Notification in Webkit style (NewNotification.ondisplay = function(){};)

Both .close() and .cancel() work for both: Webkit and W3C notifications
OSX 10.8: .close() and .cancel() remove notifications from Notification Center

Safari 6.0.2 & OSX 10.8.2:

Safari understands both APIs: W3C and Webkit.

Bugs:

• BUG: Safari seems to understand the W3C "tag" parameter and replaces a notification, but in the OSX 10.8 Notification Center the replaced notifications are still displayed, but they receive no events any more. This works better on Chrome 23.
• BUG: Safari does not understand ondisplay and needs onshow even for WebKit!

Compatibility Webkit:

• OK: webkitNotifications.checkPermission
• OK: webkitNotifications.requestPermission
• OK: webkitNotifications.createNotification
• KO: Webkit ondisplay
• OK: NO Webkit Standard: onshow
• OK: Webkit onclick, onclose: work in Notification Center
• OK: Webkit .cancel()

Compatibility W3C:

• OK: W3C window.permissionLevel
• OK: W3C window.requestPermission
• OK: W3C window.Notification
• OK: W3C onshow, onclick, onclose - attached to W3C Notification options parameter
• OK: W3C onshow, onclick, onclose - attached to Notification in Webkit style: OK too
• OK: W3C .close(): not documented by Apple, but works on OSX

Both .close() and .cancel() work for both: Webkit and W3C notifications
OSX 10.8: .close() and .cancel() remove notifications from Notification Center

Auto-Close:

Old code examples (even from W3C) suggest to register an event on ondisplay / onshow and automatically close the notification after a timeout with setTimeout.
This is very stupid:
This seems to be a relict from old times when Notifications were PopUps only. The "solution" reminds to the wildely criticised pre iOS 5 notificatons, where the popups disappeared without a trace.
Todays modern OSses have a Notification Center and queue notificatons from various sources in a list. The user can configure the list and dismiss notifications without any relevance himself.

Documentation:

W3C:

• W3C: www.w3.org/TR/notifications/
• Apple: developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/SendingNotifications.html
• Chrome vs. Safari: www.darianshimy.com/5/post/2012/10/web-notifications-in-chrome-and-safari.html

Webkit:

• Chromium: dev.chromium.org/developers/design-documents/desktop-notifications/api-specification
• Chrome: developer.chrome.com/extensions/notifications.html

Firefox Mobile:

• FireFox Mobile: developer.mozilla.org/en-US/docs/DOM/Displaying_notifications

About this article:

This is a rough text about some multiple days of research, experiments and validation. For now, it's no article in a well written manner. But it could help somebody else, who is searching for facts.
Examples and better text will be added.
Good luck!