HTML 5的消息通知机制
译文来源:http://www.ido321.com/1130.html
原文:HTML 5 Notification
译文:HTML 5 的消息通知机制
译者:dwqs
HTML 5 已经被应用到Web开发中。跟平常一样,任何一个软件新版本的发布都期待一些新的特性,这对HTML 5也不例外。为了仅仅通过HTML提高用户交互,HTML 5已经提供了很多新的API。
是不是非常有趣呢?并且HTML 5已经和CSS 3结合的非常棒了。
因此,我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能,例如Geolocation, Notification, File, 等等,第一篇文章是和Notification API相关。
首先要意识到是,HTML 5的特性和API仅能在支持HTML 5的浏览器中正常使用,如果浏览器不支持HTML 5,就不能使用HTML 5在网页中实现任何一个功能了。现在就来了解一下notification API吧。
什么是HTML 消息通知?
HTML消息通知是指我们可以告诉用户一个确定的事件行为,即使此时用户在浏览器的另一个选项卡。这个通知对于New Mail, New Tweet等事件是非常有用的。
怎么使用?
Demo
查看Demo: live demo (ps:用Web Kit浏览器打开,此文写于2012.04)
总结
HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器,对于HTML 5 notification,Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。
原文:HTML 5 Notification
译文:HTML 5 的消息通知机制
译者:dwqs
HTML 5 已经被应用到Web开发中。跟平常一样,任何一个软件新版本的发布都期待一些新的特性,这对HTML 5也不例外。为了仅仅通过HTML提高用户交互,HTML 5已经提供了很多新的API。
是不是非常有趣呢?并且HTML 5已经和CSS 3结合的非常棒了。
因此,我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能,例如Geolocation, Notification, File, 等等,第一篇文章是和Notification API相关。
首先要意识到是,HTML 5的特性和API仅能在支持HTML 5的浏览器中正常使用,如果浏览器不支持HTML 5,就不能使用HTML 5在网页中实现任何一个功能了。现在就来了解一下notification API吧。
什么是HTML 消息通知?
HTML消息通知是指我们可以告诉用户一个确定的事件行为,即使此时用户在浏览器的另一个选项卡。这个通知对于New Mail, New Tweet等事件是非常有用的。
怎么使用?
要使用Notification API,有几个步骤:首先,要从用户那里获取显示通知的许可,只有当用户允许时,才能显示通知给用户。所以先要征求用户的许可而不是直接显示通知。然后,
获取用户许可之后,我们可以显示两种类型的信息:
Normal/Default Notification
HTML Notification
最后执行通知代码。
我已经创建了一个显示通知的JavaScript函数,注意:函数仅限用于这篇文章,因为有很多种方式可以按照每个人的需求去扩展。
HTML:
复制代码JavaScript
- <h2>Show Normal Notification</h2>
- <button class="btn btn-success" id="show_notification">
- Normal Notification
- </button>
- <h2>Show HTML Notification</h2>
- <button class="btn btn-success" id="show_html_notification">
- HTML Notification
- </button>
复制代码
- // Function to show Notification
- function createNotification(type)
- {
- if(type == '')
- type = 'normal';
- if(type != 'html')
- {
- var title ="You have received HTML 5 Notification";
- var msg="Content Goes Here......";
- var notification = window.Notifications.createNotification("1.png", title, msg);
- }
- else
- {
- var notification = window.Notifications.createHTMLNotification('content.html');
- }
- notification.show();
- }
- // Binding the Click event on buttons.
- $(document).ready(function ()
- {
- if (window.webkitNotifications)
- {
- window.Notifications = window.webkitNotifications;
- $('#show_notification').click(function ()
- {
- if (window.Notifications.checkPermission() == 0)
- {
- createNotification('normal');
- }
- else
- {
- window.Notifications.requestPermission();
- }
- });
- $('#show_html_notification').click(function ()
- {
- if (window.Notifications.checkPermission() == 0)
- {
- createNotification('html');
- }
- else
- {
- window.Notifications.requestPermission();
- }
- });
- }
- else
- {
- alert('HTML 5 Notifications are not supported on this browser/OS.');
- }
- });
Demo
查看Demo: live demo (ps:用Web Kit浏览器打开,此文写于2012.04)
总结
HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器,对于HTML 5 notification,Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。
【HTML 5的消息通知机制】相关文章
2. 使用 iosOverlay.js 创建 iOS 风格的提示和通知
3. Java更新高度关注JavaScript与内存使用机制
本文来源:https://www.51html5.com/a719.html
﹝HTML 5的消息通知机制﹞相关内容
- 帮助你开发基于HTML5的网站原型页面 - HTML5 Bones
- 一个HTML5的视频智力游戏
- HTML 5的革新:结构之美
- HTML5的中的新元素
- 若干个HTML5的新特性与技术
- HTML 5的10个顶级资源
- 浅谈HTML5的本地存储特性
- HTML5的音频和JQUERY的全屏幻灯片
- 在HTML5的CANVAS上绘制椭圆的几种方法
- HTML5的互动股票图形数据HumbleFinance