How to move back to the current tab from any other tab in browser when a Webkit Notification is clicked

Question

I have made a Webkit Desktop Notification for chat. when the user are not on the current chatting page (I mean on another tab), gets notification. Everything works fine as I want them to work :)

Now what I need to do is when the user click on the appeared notification being on the other tab in browser, it will move back him to the chatting tab.

An Example, User chats on MyAwesomeChat.example.com and then moves to the Google.com and gets the notification there. Just as soon as he clicks on the notification it will take him to the MyAwesomeChat.example.com**

Below I have written my code in a function. I add a 'click' addEventListner where I wanted to do the above thing, though clueless still.

desktopnotify:(chat) ->
                if (window.webkitNotifications)
                    havePermission = window.webkitNotifications.checkPermission()
                    if havePermission is 0 && @window_blur
                      if (!(chat.get('USER_MAIL')==LOCAL_DATA.username)) 
                      # 0 is PERMISSION_ALLOWED means the user 'allow's the permission to show desktop notification when asked
                        pLength = Participants.where({USER_MAIL:chat.get('USER_MAIL')}).length
                        userImage = Participants.where({USER_MAIL:chat.get('USER_MAIL')})[pLength-1].get('USER_IMAGE')
                        
                        if(userImage?)
                          notification = window.webkitNotifications.createNotification(userImage, chat.get('USER_MAIL'), chat.get('MESSAGE'))
                          
                        else
                          notification = window.webkitNotifications.createNotification('/images/no-image.jpeg', chat.get('USER_MAIL'), chat.get('MESSAGE'))
                        notification.addEventListener('display',()->
                          window.setTimeout((e)->
                            notification.cancel()
                          , 5000)
                        notification.addEventListener('click',()->
                            console.log('here i want to do the magic. it will take back user to the page where he was chatting')
                            )  
                        )
                        notification.show()

Any idea/help/suggestions would be greatly appreciated.

Answer 1

By default a notification is bind with the window/tab that triggers it. So you just need to tell it to focus on the binding tab upon clicking.

Add something like

notification.onclick = function() { 
window.focus();    // focus on binding window
this.cancel();     // close the notification on clicking it
};

So your final code should look like

    if (window.webkitNotifications)
                        havePermission = window.webkitNotifications.checkPermission()
                        if havePermission is 0 && @window_blur
                          if (!(chat.get('USER_MAIL')==LOCAL_DATA.username)) 
                          # 0 is PERMISSION_ALLOWED means the user 'allow's the permission to show desktop notification when asked
                            pLength = Participants.where({USER_MAIL:chat.get('USER_MAIL')}).length
                            userImage = Participants.where({USER_MAIL:chat.get('USER_MAIL')})[pLength-1].get('USER_IMAGE')

                            if(userImage?)
                              notification = window.webkitNotifications.createNotification(userImage, chat.get('USER_MAIL'), chat.get('MESSAGE'))

                            else
                              notification = window.webkitNotifications.createNotification('/images/no-image.jpeg', chat.get('USER_MAIL'), chat.get('MESSAGE'))
                            notification.addEventListener('display',()->
                              window.setTimeout((e)->
                                notification.cancel()
                              , 5000)
                            notification.addEventListener('click',()->
                                console.log('here i want to do the magic. it will take back user to the page where he was chatting')
                                )  
                            )

//--------------------------------------------------------------------//

                            notification.onclick = function() { 
                            window.focus();
                            this.cancel();
                            };

//--------------------------------------------------------------------//

                            notification.show()

Cheers!!