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.