MacMost Now 749: Programming JavaScript To Send Safari 6 Notifications

With Safari 6 and Mountain Lion, users can get system notifications from web pages. Some simple JavaScript can be used for web developers to enable and use these notifications. You must first ask for permission to send notifications to the user, and then can trigger notifications. You can react to the user clicking on them as well. However, they only work while the web page is present.

You can also watch this video at YouTube (but with ads).

Video Transcript: Hi, this is Gary with MacMost Now. On today's episode let's look at how to implement Notifications using Safari 6 and Java Script.
So this is something for Web Developers. Using Java Script on your web pages you can use the Mountain Lion Notifications feature along with Safari 6. It is just a matter of knowing the right Java Script to put in there. So I've made a simple example.
So let's look at the code first. It is a very simple html example. I have script here in the header. Of course this would be in a .js file normally. I have two functions that I have defined. 
The first is going to ask the users permission to send them notifications from this web page. The second will send a notification. 
Then I've got here at the bottom just some very simple links here to trigger either one of these.  So the ask function basically it will send to the console here just the permission level so I can see what the permission level is. Now there are three different permission levels that we need to be concerned about.
The first one is the default. Which means that the user has never done anything to enable or disable notifications from this page. So it is what you are going to get when a first time user clicks this. The second is "denied" which means they have said no. The third is "granted" which means they are going to allow notifications. So notifications will work.
So I'm just going to output that there. That's not part of the regular code of course. This is. Testing window.notification tells you whether or not the browser has the ability. So if somebody is going to a browser other than Safari 6 right now then the code inside here won't work and the key thing here is that Notification.requestPermission which will basically put up a little dialogue box that we will look at soon, that asks the user if the web page can send them notifications. It has to have a function in here as the parameter. So in this case I am just going to create a simple function that sends again the log to the console here. So you can see that they have changed it. So the perfect thing would be that it starts off saying default and then this time it goes and says granted.
Now the second function is to actually send a notification. This will also test for window.Notification. It will log the permission level as well which should be granted. Here I am testing the permission level. So it should be 'granted' in order to continue otherwise this next command won't have any effect. You use new Notification to create notification and the parameters are pretty straight forward. This is the title of the notification. Then you have this object here and it has to be an object with different parameters in it. Because this is all optional. You could just send the one for testing. 
But, in this optional set of parameters you are going to have 'body' which is the actual bit of text that will display underneath the title. So you want to have that of course. That's the whole point.
You also want to have something called the 'tag'. So the tag is just some sort of number or key word that you will use to identify that notification. Now this is good because it prevents multiple notifications from being sent. So in this case I call it 'test0'. If the page for some reason sends test0 more than one time it is not going to list it multiple times. So basically it is an ID for the notification.
Then you have various functions that react to events. So you can have 'on click', 'on show', 'on close', and 'on error'.
On Click is what happens when the user gets the little alert and it says close or show me the notification. On Click is what will then happen when they select that. So I think it is the most logical one to use for something in Java Script. But On Close will be when they dismiss it and On Show is when it just simply appears and there may be a delay. The system might not show it immediately so it is good to have that call back. Of course On Error is self explanatory. So I am going to have that call back.
So let's go and take a look at what happens when we go to this page in Safari 6.
So here I am at this page in Safari. I've got my two links. So let's try the first one which is going to ask permission.  You can see it comes up with a dialogue box here. I can hit Allow or Don't Allow. Now I am going to hit allow. One of the things that I want to look at how is under Preferences in Notifications, I can see it now lists MacMost and has it set to Allow. I can set to deny and I can remove it. So that is the settings in there and it shows that the asking permission worked.
Now I'm going to hit Send Notification. There it is. It appears on the right as a Notification and if I click on it, it will run that alert, that function that had Alert in it, and show what I want. So it kind of reacts. If you put a notification out there, something is going on, the user clicks on it and then your web page reacts to that. 
Of course in System Preferences under Notifications they could change how Safari shows them Alert. So they can also go to the Alert here rather than the Banner and if they do that then Send Notification will change and you see it comes here with the Close and Show. Close will do nothing. Send Notification 'show' will then actually act as if they had clicked on the banner.
So a few things. First, I still find this a little bit buggy. When developing this simple sample script I ran into times when Safari just ignored it. I just quit Safari and restarted it again and it worked. So that should be ironed out soon. 
Another thing is when do you use this. Well it only works if the web page is actually active and opened. It is not like you can have somebody accept notifications and then reach out and send them one when they are not at their web site. So for pages like, pages that have chat windows or pages that are video conferencing, or perhaps a page that is a multi player game it is useful because you can have Java Script send this notification and if the person isn't looking at their Safari window or perhaps it's in another tab or it is hidden they will get the notification. Whereas if you did an in-page notification using Java Script or somethings else they might not see it because if the page is not open they might not see it there. So it is useful for that.
It would also be very useful in developing Safari extensions and developing applications that have Java Script imbedded in them. Then you want to use notifications and it supports the whole web kit thing.
So you've got a lot of different options there and I am sure in the future we will see some interesting uses for it. For instance, I could see implementing it at MacMost perhaps asking or having a little link saying, "Notify me when you visit MacMost and there is some new security information." And then if I post a new article about some new security threat, next time you visit MacMost even if you are looking at a tutorial on something completely different, you will get a notification saying, "There's an article over here that you really want to check out."
So that is one possible use for it. We will probably see a lot more uses over the next months and years.
Hope you found this useful. This is Gary with MacMost Now.

Comments: 6 Responses to “MacMost Now 749: Programming JavaScript To Send Safari 6 Notifications”

Richard Fuhr

12 years ago

Hi Gary, Thanks for providing this interesting example of using the new Notifications technology. It worked great on Safari 6 on my Mac running Mountain Lion. Is this kind of JavaScript also supposed to work (or work in some future release) of iOS on iPods, iPhones and iPads? Right now your sample web page did not seem to work on my iPhone.

Gary Rosenzweig

I haven't tested it, but perhaps in iOS 6? If not, I'm sure Apple will have it working at some point. Of course it doesn't work with other browsers and on Windows, so there's probably no rush.

Doug

Is it possible to send notifications without first requesting permission? Only asking because it might be possible for a website to use notifications as a new form of pop-up for advertising purposesm which would get annoying.

No. You have to ask permission for a notification. Of course a web site could pop up a notification-looking graphic on its site. That's been possible since the start of the web. But to get into the Mac's notification center, permission has to be asked first, and you always have control over your list of allowed sites. So this won't be used for ads.

John Blake

I am trying to get my head around this feature. I work in a school. It is a challenge to communicate with middle school students. We make daily announcements, to remind students about up coming events, and procedures. The idea of notifications being pushed to their MacBooks or in some schools I am familiar with that have iPads, is interesting. I want to try this. We use Joomla and I am not sure the HTML script would work on that page. Hopefully, someone will try it. We are not running Mountain Lion on our MacBooks, and are not using iPads. It is still a cool idea and I can see the pluses of running it on a website in schools.

It wouldn't work unless they are using Mountain Lion. Plus, this kind of notification only works if they happen to be looking at the web site at that time. For what you want, it would probably be best to figure out a way to send text messages to them. Those are like pure notifications. Text messages or emails.

Comments Closed.

MacMost Now 749: Programming JavaScript To Send Safari 6 Notifications

Comments: 6 Responses to “MacMost Now 749: Programming JavaScript To Send Safari 6 Notifications”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information