Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Software Development
Programming
Tutorials
HTML 5 Desktop Notifications
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Markshall" data-source="post: 280545" data-attributes="member: 1872"><p>An exciting new feature has recently come in to play: desktop notifications.</p><p></p><p>This is possibly my favourite feature in HTML 5 and I can see it having a massive impact on the way messaging systems and notification centers etc on websites will work in the future.</p><p></p><p>It's extremely easy to use and I will show you some code below on how to use it.</p><p></p><p>First of all, you will need to request permission from the user to show desktop notifications on their device:</p><p></p><p>[CODE]Notification.requestPermission();[/CODE]</p><p></p><p><span style="font-family: 'Courier New'">requestPermission </span>also has a callback function which takes one parameter, this parameter will be the answer the user has chosen on whether they want desktop notifications displayed or not.</p><p></p><p>[CODE]Notification.requestPermission(function(p) {</p><p> alert('You have ' + (p === 'granted' ? 'allowed' : 'disabled') + ' desktop notifications.');</p><p>});[/CODE]</p><p></p><p><span style="font-family: 'Courier New'">p</span> will have two possible values: [<em>granted</em>, <em>denied</em>].</p><p></p><p>Displaying a notification is very, very simple. The method takes 2 parameters, the first will be the title displayed at the top of the notification and the second is an object compiled of options specific to the notification.</p><p></p><p>[CODE]var notification = new Notification('This is the title', {</p><p> body: 'Hello, this is the main content of this notification!',</p><p> icon: 'http://icons.iconarchive.com/icons/kyo-tux/phuzion/256/Sign-Info-icon.png'</p><p>});[/CODE]</p><p></p><p>As you can see, I have assigned an instance of <span style="font-family: 'Courier New'">Notification </span>to the <span style="font-family: 'Courier New'">notification </span>variable, and inside the object it has two properties: <span style="font-family: 'Courier New'">body </span>and <span style="font-family: 'Courier New'">icon</span>. <span style="font-family: 'Courier New'">body </span>is obviously the main content displayed inside the notification, and <span style="font-family: 'Courier New'">icon </span>is the icon that will be displayed on the left hand side.</p><p></p><p>The clever thing about the icon is that you don't have to resize it yourself, of course you can set it to a size if you store the image locally, but if it is too large, the browser will automatically scale the icon!</p><p></p><p>Of course, you don't have to provide either of these options and they are all completely optional.</p><p></p><p>Here's the clever part, in the options object there is also a property called <span style="font-family: 'Courier New'">tag </span>which is a unique ID to the notification. So if you want the user to click the notification, it can take them to a specific location. For example:</p><p></p><p>[CODE]var notification = new Notification('New message from Mark', {</p><p> body: 'Click me to read the message',</p><p> icon: 'https://cdn1.iconfinder.com/data/icons/Android-R2-png/512/Messages-Android-R.png',</p><p> tag: '458127'</p><p>});</p><p></p><p>notification.onclick = function() {</p><p> window.location.href = 'messages.php?messageid=' + this.tag;</p><p>}[/CODE]</p><p></p><p>This will take the user to <span style="font-family: 'Courier New'">messages.php?messageid=458127</span> when they click on the notification.</p><p></p><p>Of course there is a lot more to this feature, so take a further look here: <a href="https://developer.mozilla.org/en/docs/Web/API/notification" target="_blank">https://developer.mozilla.org/en/docs/Web/API/notification</a></p><p></p><p>I hope this tutorial helps you and I look forward to seeing what comes of this feature.</p><p></p><p>Mark</p></blockquote><p></p>
[QUOTE="Markshall, post: 280545, member: 1872"] An exciting new feature has recently come in to play: desktop notifications. This is possibly my favourite feature in HTML 5 and I can see it having a massive impact on the way messaging systems and notification centers etc on websites will work in the future. It's extremely easy to use and I will show you some code below on how to use it. First of all, you will need to request permission from the user to show desktop notifications on their device: [CODE]Notification.requestPermission();[/CODE] [FONT=Courier New]requestPermission [/FONT]also has a callback function which takes one parameter, this parameter will be the answer the user has chosen on whether they want desktop notifications displayed or not. [CODE]Notification.requestPermission(function(p) { alert('You have ' + (p === 'granted' ? 'allowed' : 'disabled') + ' desktop notifications.'); });[/CODE] [FONT=Courier New]p[/FONT] will have two possible values: [[I]granted[/I], [I]denied[/I]]. Displaying a notification is very, very simple. The method takes 2 parameters, the first will be the title displayed at the top of the notification and the second is an object compiled of options specific to the notification. [CODE]var notification = new Notification('This is the title', { body: 'Hello, this is the main content of this notification!', icon: 'http://icons.iconarchive.com/icons/kyo-tux/phuzion/256/Sign-Info-icon.png' });[/CODE] As you can see, I have assigned an instance of [FONT=Courier New]Notification [/FONT]to the [FONT=Courier New]notification [/FONT]variable, and inside the object it has two properties: [FONT=Courier New]body [/FONT]and [FONT=Courier New]icon[/FONT]. [FONT=Courier New]body [/FONT]is obviously the main content displayed inside the notification, and [FONT=Courier New]icon [/FONT]is the icon that will be displayed on the left hand side. The clever thing about the icon is that you don't have to resize it yourself, of course you can set it to a size if you store the image locally, but if it is too large, the browser will automatically scale the icon! Of course, you don't have to provide either of these options and they are all completely optional. Here's the clever part, in the options object there is also a property called [FONT=Courier New]tag [/FONT]which is a unique ID to the notification. So if you want the user to click the notification, it can take them to a specific location. For example: [CODE]var notification = new Notification('New message from Mark', { body: 'Click me to read the message', icon: 'https://cdn1.iconfinder.com/data/icons/Android-R2-png/512/Messages-Android-R.png', tag: '458127' }); notification.onclick = function() { window.location.href = 'messages.php?messageid=' + this.tag; }[/CODE] This will take the user to [FONT=Courier New]messages.php?messageid=458127[/FONT] when they click on the notification. Of course there is a lot more to this feature, so take a further look here: [URL]https://developer.mozilla.org/en/docs/Web/API/notification[/URL] I hope this tutorial helps you and I look forward to seeing what comes of this feature. Mark [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Software Development
Programming
Tutorials
HTML 5 Desktop Notifications
Top