One feature Pragmatic.ly has had from the beginning is Web Notifications. When I first saw the feature in Gmail I was convinced it was a feature every web application should have. As a project management tool Pragmatic.ly should enhance collaboration and ease communication. Instant desktop-like notification is one way to achieve the goal.
For a long time only Chrome users have been able to benefit from such features. But the release of Safari 6 in Mountain Lion has changed things for the better and now it’s time to integrate web notification into your application.
|Safari||Yes. version 6 in Mountain Lion only|
|Firefox||Yes. Install Plugin ff-html5notifications|
|IE||No. But can work in Chrome Frame|
For more list, checkout https://html5test.com/compare/feature/notifications-notifications.html.
Since different browsers support the notifications in different ways, there are two specs of web notifications we need to cover. One is the older version which is implemented in latest version of Chromium, and the other is the newer version at W3C which safari followed. (The Firefox plugin followed the Chromium implementation). Considering safari 6 also does support the old spec, I would say it’s better to still stick in the old spec, at least for now.
How to Use
Danger Cove wrote an awesome demo on how to use HTML5 web notifications, based on the old spec. If you’re looking for the samples of the new spec, safari document definitely is a good resource. Below are several notes from the experience I added the integration.
- requestPermission requires the callback to make it work with Safari
- You can interact with your application using events such as onclick, by referring window.parent. For example as in Pragmatic.ly, when user clicks the popup notification, it will show you the ticket where event happens.
class Notifier constructor: -> @enableNotification = false @checkOrRequirePermission() hasSupport: -> window.webkitNotifications? requestPermission: (cb) -> window.webkitNotifications.requestPermission (cb) setPermission: => if @hasPermission() $('body .notification-alert a.close').click() @enableNotification = true else if window.webkitNotifications.checkPermission() is 2 $('body .notification-alert a.close').click() hasPermission: -> if window.webkitNotifications.checkPermission() is 0 return true else return false checkOrRequirePermission: => if @hasSupport() if @hasPermission() @enableNotification = true else if window.webkitNotifications.checkPermission() isnt 2 @showTooltip() else console.log("Desktop notifications are not supported for this Browser/OS version yet.") showTooltip: -> $('body').append(JST["app/views/lib/notification_info"]()) $('body .notification-alert').on 'click', 'a#link_enable_notifications', (e) => e.preventDefault() @requestPermission(@setPermission) visitUrl: (url) -> Spine.Route.navigate(url) notify: (avatar, title, content, url = null) -> if @enableNotification popup = window.webkitNotifications.createNotification(avatar, title, content) if url popup.onclick = -> window.parent.focus() window.parent.notifier.visitUrl(url) popup.show() setTimeout ( => popup.cancel() ), 12000 window.Notifier = Notifier
While Safari 6 in Mountain Lion brings the support, it also brings some limitations, for example,
- Custom icons aren’t supported any more in Mountain Lion, no matter which browser you use. It’s controlled by the Notification Center and will always show the application icon such as Safari, Chrome. However, users in other OS doesn’t have the problem. Hope Apple can fix it soon.
- Title is truncated to 30 characters in Mountain Lion. So does body. However, you can view the whole body in the Notification Center.
- You can’t control how the notifications close in Mountain Lion. It’s taken by the Notification Center setting.
- HTML Notification doesn’t work in Safari because the new W3C spec only have simple notification. So I suggest using simple notification only in your application.
One More Thing
If you’re developing Chrome extensions, do remember to add the “notifications” permission in the manifest.json. So when users install the extensions, the permission will be automatically granted. For Safari extensions, nothing needs to be added since it’s handled by Safari with permission auto granted.
Pragmatic.ly is a lean collaborative project management tool aiming to help small teams make better products easier. It’s the ideal and elegant project management tool for tech startups.
Now that you’ve read so far, you should follow me @yedingding!