Skip to main content

Showing Notifications with HTML5/Webkit

Most of us use popular twitter clients such as TweetDeck, Seesmic which are developed using Adobe AIR. One thing  I like about these clients is that they show notifications when the application is in the minimized mode. Now with browsers implementing webkit such as Google chrome one can use the notification API to send notification to the browser. In this blog post I will be explaining how one can implement webkit notifications in their web application. 


Before we get started with creating notifications we need to check whether the Browser supports the Notification API. This is a simple:

if(window.webkitNotifications)
    //your browser supports Notifications
else
    //switch to other browser that support Notifications

The next step would be to get user permissions to show notifications from the website:
if (window.webkitNotifications.checkPermission() == 0) {
    //show notification code
}
else {
    //request for permission and then show notification code
    window.webkitNotifications.requestPermission();
}
The checkPermission method returns '0' if the website has granted permission to show notifications and returns '1' otherwise. The requestPermission method requests the user to provide permission to show notifications. Once the user has provided the permission the next step would be to show the notification to the user:
showMessageAsNotification = function() {
    window.webkitNotifications.createNotification('image','title','content').show();
}

The createNotification method used here displays the notification to the user on the bottom right corner of the screen. For example when the user clicks on a button he will shown a notification with a welcome message:



The notification shown contains a picture, title as 'Sagar' and the message 'Welcome'. It also provides information such as the website from which the notification is shown and an option to Dismiss the message. The options button allows user to disable notifications from the website.
Strictly speaking this is not a part of HTML5 specification rather it is a webkit feature. Therefore this may work only with browsers implementing webkit. 

Comments

  1. eh? is this really part of HTML5 or just something that works only on webkit-based browser??

    ReplyDelete
  2. Yes Henry, you are right. I have updated my blog.

    ReplyDelete
  3. Assignment Help
    Students have many types of problem related to college assignment. So we have well educated expert for writing assignment. If you have any problem in writing assignment . then Don’t worry because we provide best online assignment help and free plagiarism assignment.

    ReplyDelete
  4. Whenever I think about my programming assignments, I black out for a moment. The lengthy codes and frameworks make me nauseous every time. Thanks to programming Online Assignment Help, I do not regret my decision of choosing this subject for graduation. The writers are so good at programming that I get ‘A’ score whenever I choose them to write my programming assignment on my behalf.

    ReplyDelete

  5. Brother Printer
    team will help you with all your technical difficulties in using brother printer and will resolve all your doubts regarding the setup and installation process. calling the tech support team will save your time and money. so call us now on Brother Printer Help Phone Number
    +1-888-902-8333 to help you with your difficulties.

    ReplyDelete
  6. Thanks, great post. I really like your point of view. I m Marry Taylor, I working as a support executive for printer devices. I am offering support for HP Devices and If you need help then contact Hp customer Support +1-888-902-8333 and you can also chat us to get assistance to fix issues regarding HP printer.

    ReplyDelete
  7. essay writing services are available at low-cost prices. The students can also buy the plagiarism reports of their history essays. Hence, if you are a history student, stop worrying as this destination called Essay Assignment Help assures you a complete achievement. Hire Now at Australiaassignmenthelp.com.

    ReplyDelete
  8. Get help with assignment writing from students assignment help in all over the world. We provide essay writing help, dissertation help, homework help, paper writing help, and case study help. We also provide college essay writing help at a very low price.

    ReplyDelete
  9. It's really a very nice article amazing in fact. For students help you just look at AllAssignmentHelp.com by experts. Click here Programming Homework Help

    ReplyDelete
  10. Essayassignmenthelp is the best among fast assignment writing companies for many reasons. When someone asks us for my assignment help, our team of assignment experts concentrates on developing high quality assignments written for you in accordance with the prompt and delivers the complete within agreed deadline. Therefore, our students achieve good grades in their academics. Just ask for the help with assignment.

    ReplyDelete
  11. At MyAssignmenthelp.com brings in a bunch of affordable services. When you place an order for a thesis statement, we do not charge you for separate sections of the paper. Best guide to writing thesis statement.

    ReplyDelete
  12. NZ assignment help is given by students assignment help.com in New
    Zealand at a very low price. Catch the exciting offer on assignment writing services on students assignment help and make your assignment of a professional level that will enhance your scores.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. If you think this is a good platform for you, then you can go for AOL Gold Desktop Download. The most amazing services are waiting one step away from you.

    ReplyDelete
  15. Get instant assignment writing services to help in UAE from the expert of uaeassignmenthelp.com and get free revisions and 100%plagiarism free assignment on buy coursework UAE. They offer on-time delivery of coursework. Hurry up,

    ReplyDelete
  16. Students struggle for completing their academic task, that is why the team of professional writers at StudentsAssignmentHelp.com is here and always giving cpm homework help cc1. Our online assignment makers understand all your requirements and work in the asked direction to prepare an accurate assignment.

    ReplyDelete
  17. Best and qualified writers at Students Assignment Help are providing research paper writing help services to the students. We never miss any of the deadlines. Our professional and expert writers are available online always for help the students.

    ReplyDelete

Post a Comment

Popular posts from this blog

Custom validation messages for HTML5 Input elements using the constraint validation API

HTML5 has introduced several input types such as EMAIL, URL, RANGE, SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented them and are ready to be used in a HTML document. Another exciting feature introduced in HTML5 is the form validation. Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails. In this post I'll explain how these error messages can be changed.

De-obfuscating javascript code in Chrome Developer Tools

I had blogged about JavaScript debugging with Chrome Developer Tools some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code.

What is Minification?

Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript file…

Adding beforeRender and afterRender functions to a Backbone View

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.