65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML5 Web 通知

Gil Fink
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.20/5 (3投票s)

2011年7月29日

CPOL

3分钟阅读

viewsIcon

42366

使用 Web Notifications API 在 Web 应用程序中实现诸如“邮件已到达”、“打印机缺纸”之类的通知。

引言

HTML5 Web Notifications是否想在用户浏览您的网站时通知他们？诸如“邮件已到达”、“打印机缺纸”之类的通知在智能客户端中已经存在了几十年，但在 Web 应用程序中，它们不太容易实现。过去，您可以实现闪烁行为，使浏览器的图标闪烁，或者添加一个会惹恼用户的弹出窗口。有一些方法可以以浏览器特定的方式实现此行为（例如 IE9 中的 Overlay Icon API），但在 HTML5 中，有一个新的选择 – Web Notifications API。此 API 尚未成为推荐标准，因此将来可能会发生变化，使用风险自负。

什么是 Web Notifications API？

Web Notifications API 是一种构建简单通知的机制，可以在 Web 页面之外提醒用户。这些通知可以被动地使用（通知新的推文、日历事件等）或主动地使用（与用户交互），并且它们不受限于具有焦点的选项卡。 该 API 依赖于用户授予的权限。 如果没有用户请求通知的指示，通知机制将不起作用。

授予权限

使用 Web Notifications 的第一步是检查用户是否希望收到通知。 以下代码示例演示如何使用 notifications API 的 requestPermission 和 checkPermission 函数。

$('#btnGrantPermission').click(function () {
    if (window.Notifications.checkPermission() == 0) {
        createNotification();
    } else {
        window.Notifications.requestPermission();
    }
});

在该示例中，我使用 jQuery 将单击事件绑定到按钮，该按钮将检查我们是否具有使用通知的权限。 如果存在权限，则 checkPermission 函数将返回 0，并且在该示例中，我调用 createNotification 函数。 如果我们没有权限，那么我们使用 requestPermission 函数来请求在网页中使用通知的权限。

请注意，requestPermission 必须在由用户触发的事件处理程序下运行！

如何使用 Web Notifications API？

为了使用 Web Notifications API，您需要创建一个通知。 以下是使用 createNotification 函数创建通知的示例

function createNotification() {
    var notification = window.Notifications.createNotification
                       ("1.png", 
                       "New HTML5 Notification Received - Subject", 
                       "More Content...");
    notification.onshow = function () {
        setTimeout(notification.cancel(), 1500);
    }
    notification.show();
}

在该示例中，我使用 createNotification 工厂函数创建一个通知。 该函数获取要在通知中显示的图像的 Uri，一个 subject string 和一个 content string。 之后，我将 onshow 事件连接到 setTimeout 函数以取消通知。 最后使用的 show 函数会将通知显示给用户。 在规范中，您还可以使用 Notification 对象并使用相同的参数实例化它。

createNotification 来自 WebKit 引擎实现。

完整示例

<!DOCTYPE html>
<html>
<head>
    <title>Notifications</title>    
    <script type="text/javascript" 
    src="jquery-1.6.2.min.js"></script>
</head>
<body>
    <div>
        <input id="btnGrantPermission" 
        type="button" value="Grant Notification Permission" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {        
            if (window.webkitNotifications) {
                window.Notifications = window.webkitNotifications;
                $('#btnGrantPermission').click(function () {
                    if (window.Notifications.checkPermission() == 0) {
                        createNotification();
                    } else {
                        window.Notifications.requestPermission();
                    }
                });
            }            
        });        
 
        function createNotification() {
            var notification = window.Notifications.createNotification
            ("1.png", "New HTML5 Notification Received - Subject", 
            "More Content...");
            notification.onshow = function () {
                setTimeout(notification.cancel(), 15000);
            }
            notification.show();
        }
    </script>
</body>
</html>

关于此示例需要注意的几件事

  • 我删除了 webkit 前缀，因为规范中不存在它。 当规范成为推荐标准时，它将被省略（我希望如此……）。
  • 该示例仅适用于使用 WebKit 引擎的浏览器，例如 Google Chrome。
  • 我使用 jQuery 将事件侦听器添加到单击事件。

这是使用此代码段时将收到的通知

Notification

摘要

Web Notifications API 可以通过帮助 Web 开发人员为他们的客户端创建简单的通知，例如邮件到达、事件警报以及 Web 应用程序中发生的更多事情，从而为他们增加更多功能。 这些规范目前正在制定中，因此将来可能会发生变化。 此外，目前只有使用 WebKit 引擎的浏览器实现了它，因此现在采用此 API 还为时过早。

© . All rights reserved.