「风车协作」官方博客

好好做产品,做好产品

It's not perfect but it's time to integrate web notifications

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.

Chrome Web Notification

Safari Web Notification

Browser Support

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.

Browser Whether Support
Chrome Yes
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.

  1. The request permission dialog only shows after user interactions. Automation such as usingJavascript to click the link/button doesn’t work.
  2. requestPermission requires the callback to make it work with Safari
  3. 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.

Check the Gist to see how Pragmatic.ly integrates web notifications.

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

Limitation

While Safari 6 in Mountain Lion brings the support, it also brings some limitations, for example,

  1. 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.
  2. Title is truncated to 30 characters in Mountain Lion. So does body. However, you can view the whole body in the Notification Center.
  3. You can’t control how the notifications close in Mountain Lion. It’s taken by the Notification Center setting.
  4. 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.


About Pragmatic.ly

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!