Desktop Notifications

Desktop notifications allow a web page to notify the user using system level services, such as Growl, in a clean, safe, and easy to use manner.

The code is very simple:

navigator.notification.notify("Another Desktop Notification",
                              "Check out my icon",
                              "http://dougt.org/me.jpg");

and the result is something you’d expect from a notification.  On the Mac, the notification may look like:

You can get more sophisticated by adding a callback when the user clicks on the Desktop Notification:

navigator.notification.notify("Another Desktop Notification",
                              "Check out my icon",
                              "http://dougt.org/me.jpg");
                              function() { /*do something*/ });

A user must grant each site permission before they can use Desktop Notifications.  We will use the familiar notification bar (the text isn’t final.  Also, these will end up looking quite different in future releases of Firefox.):

That is there all there is to it!

Get involved:

If you like or dislike this feature, please just leave a comment.

If you like to follow the implementation details, you can follow bug 573588.

You can try out the engineering builds.  There are bound to be a few bugz.  If you see anything funky, please let me know.

If you are using the above engineering builds, you can try out Desktop Notifications.

More details:

I reviewed two draft specifications.  The first is the WebNotification specification and the other is the Google Gears NotificationAPI.  I found both of these APIs more complex than what was required.  Clearly both of these other APIs have use cases that are not address by my proposal.  But for basic notification from the browser, not much is required.

Looking at what Growl and other system level notification services provide, you basically only need a title, a description, and an icon.  For fun, I added one callback if the user clicks on the notification while it is on screen.

Next Steps

You tell me.  Is this something you’d like to see in the browser?  Does the API work for your use cases?

Let me know what you think!

Play it here. You must be running Firefox 3.6 RC or better.

This uses the new orientation events added to Firefox 3.6.

Syd also put together a demo of what orientation looks like for those that do not have Firefox 3.6:

This web feature is going to be standardized in the W3C in one of two working groups.  The general idea is to separate out acceleration (values in g) and orientation (values in degrees for azimuth, roll, pitch).  More on that next year when we figure out where the work will be done!

In this trivial example, the object |geolocation| is fully compatible with the W3C’s geolocation object that exists under the navigator object in web content. |successCallback| will be called when Firefox acquires your position.

The prompting of the user is left up to your application. All addons hosted on addons.mozilla.org must follow the guidelines and prompt the user.

If you have questions about what is permissible, please contact me.

If you a linux laptop and have a few minutes, please download one of the Firefox Trunk nightly builds and try out orientation!

What to try?

http://people.mozilla.org/~dougt/ori.html

Let it run for a little bit, then shake your laptop (not responsible for any damage ).  After you have a couple dozen responses, send me the results including what distro and laptop you are using.

Demos!

While you are testing things out, check out the demo Michael Ventnor (m.ventnor at gmail.com) put together:

http://dougt.org/random/orientationdemo/index.xhtml

Justin Dolske has a few demos too:

• Seismometer
• No idea, but it’s awesome

Jesse Ruderman also cleaned up the “ball” demo that I created making the animation smoother.

Help Wanted

There are still other platforms that I would like to support.  I specifically would like to see Windows support using their Sensor API.  If you are interested in helping, file a bug, cc me, and take a look at the other implementations.

Obviously clear that there should be a webapp for doing just that.  What was missing was a javascript API.

In recent Mozilla trunk builds, I have added support for an orientation event.  This new event will allow you to build applications and listen for changes in orientation.  (note, the first platform to support such an event is any MacBook Pro.  Others will follow).

Simple Call:

To use this new event, you will add an event listener as you normally would:

window.addEventListener(“MozOrientation”, orientationChange, true);

Your callback will be called, when there is a change in acceleration, passing the current orientation:

function orientationChange(o) {

}

Simple Result:

The passed object has 3 attributes – “x”, “y” and “z”.  Each value is between -1 and 1 where zero is the “balance point”.  For example, suppose you device is a MacBook Pro and it is sitting on a desk that is perfectly level, you would expect to see:

x = 0
y = 0
z = 1

x is the axis in the direction from the left side of the keyboard to the right side of the keyboard (basically the axis that is along the home row keys) is level.  If I lift up the left side of the keyboard, x will increase.  if I lift up the right side, x will decrease.

y is the axis in the direction from the front of the laptop (where the mouse is) to the back of the laptop.  If I lift up the front of the laptop (the side closest to me), y will decrease.  If I left the back towards the front, y will increase.

Got that?  Yeah, physics is pretty hard.

x and y can easily be visualized.  If you have a recent trunk build for the Mac, try loading this demo page:

http://people.mozilla.org/~dougt/ball.html

z basically will tell you that the laptop is sitting right side up.  if z was -1, you would know that the laptop (probably closed) and is sitting on its screen.  Of course the value will change as you rotate the laptop / device in this direction.

Right now, there is only support for the Macbook Pro.  It is pretty easy to add support for different OSs.  We have code for Samsung Windows Mobile devices, and for the HTC Windows Mobile devices.  We still need support for linux and for Windows.  If you are interested in adding support file a bug and start looking at http://mxr.mozilla.org/mozilla-central/source/widget/public/nsIAccelerometer.idl

The API isn’t fixed and may change.  I do invite you to comment.  Keep in mind that we want a really simple and straight forward API to expose orientation events to web developers.  If your response has either “RDF” or “DCCI” in it, please reread the last sentence. 

Thanks again and hope you enjoy.

For example, instead only being able to work with:

37.3882005, -122.0834553

You can see the physical address as:

650 Castro St, Mountain View, California, 94041, US

This should help aide the many people that already know their physical address in familiar terms.

To access address elements, you simply do what you have been doing.  The only modification is to test to see if there is an address associated with the position, and if so, access it:

navigator.geolocation.watchPosition(successCallback)
function successCallback(position)
{
    if (position.address)
        alert(position.address.postalCode);
}

Other fields on the address object are:

address.streetNumber
address.street
address.premises
address.city
address.region
address.county
address.countryCode
address.postalCode

Please let me know what you think.

For example:


navigator.orientation.watchOrientation(draw);

function draw(o) {
// o.x, o.y, o.z
}

o in function draw is a vector in three dimensional space in meters /
(seconds^2) units.

This allows you to do some revolutionary stuff on the web. This is a simple test web page that moves a ball around a web page. I am just loading this web page directly with XUL Runner on Windows Mobile Professional 6.

Device Orientation on YouTube

This only supports exists on HTC devices but i do expect other devices that have accelerometers to have implementations.

I am tracking this feature in bug 485943. Please check it out and let me know what you think.