Jump to content

JS Notifications API

javascript js notification api chrome webkit web development html html5

  • Please log in to reply
20 replies to this topic

#1 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 18 October 2012 - 10:17 AM

Stumbled across this today when looking for a polyfill for CSS transitions. It's currently only in Chrome and has only been partially supported until the latest version (22). The short of it is that a user can choose to enable desktop notifications for your domain and display relevant information to you even when your browser is minimized or you're looking at another tab.

Here's an example of what it looks like (upper right corner)
Spoiler


The code is extremely simple, following a pattern of
  • Check to see if the browser supports the feature (common with any newish feature)
  • Check if you have permission to display notifications
  • If not, request access
  • On callback make sure we have permission (if we don't they denied access)
  • Display the notification
Do note that the request access MUST come from a user event (ie, clicking an element) otherwise Chrome will ignore the request.
if(webkitNotifications) // check that the browser supports notifications
{
	if(webkitNotifications.checkPermission() === 1) // checkPermission returns 0 for allowed, 1 for not allowed
	{
		// requestPermission() accepts an option callback argument; if a function is presented it will run that after a user has
		// selected allow or deny
		webkitNotifications.requestPermission(function(){
			if(webkitNotifications.checkPermission() === 0)
			{
				// user allowed notifications
				showNotif('Notifications enabled', 'Thanks for enabling notifications, guy.');
			}
			else
			{
				// user declined notifications
				alert('we\'ll contact you some other way...');
			}
		});
	}
	else
	{
		showNotif('You\'re silly', 'You already had notifications for us enabled');
	}

	function showNotif(title, message, img)
	{
		// if img wasn't specificed give it a default value
		img = img === undefined ? 'http://nerdforum.org/favicon.ico' : img;
		webkitNotifications.createNotification(img, title, message).show();
	}
}

That's it!

Here's a working example: http://jsfiddle.net/ah4hH/1/

I'm hoping browser support for this picks up, it's certainly a nice feature to have for a multitude of services. This combined with ajax polling can accomplish some neat things. (ie, desktop notifications for a new message or reply to a subscribed thread, etc.)

There are several pitfalls to be careful of, you can send an unlimited* amount of notifications but only 3 will be displayed, the rest placed into a queue. At the time of writing this you do not have access to the queue (outside of making one yourself), so if you wanted to avoid redundant notifications (IE multiple notifications for a new message from the same user) you need to make use of the notifications tag attribute. If two notifications with the same tag are sent only the most recent will display.

* I only tried 100, I can't imagine a case logically wanting to exceed that.

There's also a few useful events for the Notifications object,
onclick, onclose, ondisplay, onerror, onshow


Here's the w3c write up: http://www.w3.org/TR/notifications/

I'll probably make a neat little Notifications wrapper this afternoon.

#2 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 18 October 2012 - 10:25 AM

Nifty.
nmjUGDL.jpg

#3 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 18 October 2012 - 10:42 AM

Indeed. Surprisingly I haven't seen anything besides gmail pick up support for this (I only know that because it was on my allowed list somehow).

#4 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 18 October 2012 - 10:52 AM

I think google likes to show off the nifty things that chrome can do.
nmjUGDL.jpg

#5 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 18 October 2012 - 10:57 AM

I think Chrome was actually made to speed up the process of JS innovation for google apps. When discussing the V8 engine they specifically mentioned that it needed higher performance because of their stuff.

#6 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 18 October 2012 - 11:07 AM

That's entirely possible. If nothing else it makes a great conspiracy.
nmjUGDL.jpg

#7 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 18 October 2012 - 06:35 PM

Spleen! Implement this for topic subscriptions! CHOP CHOP!

Rumors of my demise have been greatly exaggerated.


#8 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 18 October 2012 - 07:12 PM

Ok, I'm still trying to get my overly medicated brain around the code. It appears that everything is setup in the post, but I imagine it has to get information from somewhere, which I'm not seeing. Is there anything else I need to just plug this into the %header% segment?
nmjUGDL.jpg

#9 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 18 October 2012 - 07:20 PM

I have no idea how IPB works. Your guess is as good as mine.

Rumors of my demise have been greatly exaggerated.


#10 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 18 October 2012 - 08:27 PM

I need to give you both admin access for a day and see what you can come up with. >.>
nmjUGDL.jpg

#11 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 19 October 2012 - 07:47 AM

I welcome this <_<

Rumors of my demise have been greatly exaggerated.


#12 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 19 October 2012 - 10:29 AM

I'm not sure how I feel about that face. >.>
nmjUGDL.jpg

#13 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 19 October 2012 - 10:42 AM

It's because
<img src='http://nerdforum.org/public/style_emoticons/<#EMO_DIR#>/dry.png' class='bbc_emoticon' alt='<_<' />
turns into <_<
I accidentally do it all the time and it makes me hate everything

#14 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 19 October 2012 - 10:46 AM

Ah, brb, going to fix that now. >.>

Also, how would the two of you feel about a clone board to play with and tinker without worrying about errors on this one?
nmjUGDL.jpg

#15 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 19 October 2012 - 07:25 PM

I would prefer that, actually. I'd love to get under the hood of IPB

Rumors of my demise have been greatly exaggerated.


#16 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 19 October 2012 - 08:03 PM

I'll set something up either tonight or tomorrow.
nmjUGDL.jpg

#17 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,789 posts
  • LocationHouston

Posted 24 October 2012 - 11:07 AM

So have yall toyed with this any? I'm interested in seeing what the collected bored minds of two of the oddest people I know can come up with. >.>
nmjUGDL.jpg

#18 Jaz

Jaz

    Purify...

  • Members
  • 6,476 posts

Posted 24 October 2012 - 03:35 PM

So have yall toyed with this any? I'm interested in seeing what the collected bored minds of two of the oddest people I know can come up with. >.>


Same

I wanna find that old achievement thread, too <.<

#19 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 24 October 2012 - 04:50 PM

Gonna be honest here. I forgot.

Rumors of my demise have been greatly exaggerated.


#20 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 24 October 2012 - 05:00 PM

Gonna be honest here. I'm lazy.





Also tagged with one or more of these keywords: javascript, js, notification, api, chrome, webkit, web, development, html, html5