Web Notifications API简介

最新推荐文章于 2024-07-11 17:50:35 发布

dingshi7798

最新推荐文章于 2024-07-11 17:50:35 发布

阅读量311

点赞数

对于许多人（移动用户无法承受），56kb连接的时间已经消失了。那时浏览器可以打开单个页面的位置足够多，甚至没有人甚至可以通过多标签浏览来预测未来。如今，社交网络，帖子，回复，评论，照片，视频等等使我们不知所措。已经创建了多个系统，以克服查看每个选项卡以检查新活动的需求。这些方法之一是通知，它在不同的网站上非常普遍。

直到不久之前，每个开发人员都必须自己实现通知，从而产生了一系列不同的解决方案。 W3C定义了一个API来解决此问题，该标准称为Web Notifications API 。

在移动设备上，我们对通知的概念非常熟悉。尝试离线几个小时，一旦连接到Internet，设备上安装的其他应用程序发出的通知将使您不知所措。对于在台式机和移动设备上无缝运行的网页，采用相同的机制将非常好。如简介中所述，此类系统已经开发和标准化，因此今天我们有了Web Notifications API 。

通知地狱
布拉德·弗罗斯特（Brad Frost）的演讲《死到废话》无耻地被盗

什么是Web Notifications API

Web Notifications API被定义为用于最终用户通知的API。通知允许在网页上下文之外警告用户发生的事件，例如电子邮件的传递。规范未描述UA应如何以及在何处显示这些通知。因此，我们将在不同的浏览器上看到不同的样式，并且根据所使用的设备，我们将在不同的位置看到通知（例如，在移动设备上，我们可能会在通知栏中看到它们）。值得注意的是，在显示通知之前，浏览器会向用户显示警报，该用户必须明确表示同意。

在Firefox上使用Web Notifications API进行通知的示例

这个API已经存在了一段时间，以至于规范已经多次更改。该规范有两个主要版本。第一个版本已在旧版的Chrome和Firefox中实现。现在，该规范似乎很稳定，尽管截至2014年4月19日仍是W3C工作草案。

考虑此类API的一些用例并不难。例如，您可能希望在收到电子邮件后立即收到通知。如果有人在推文中提及您，或在Facebook或Google+上发布了您的照片，您可能还希望得到通知。

既然我们知道了这个API的含义以及它的优点，那么让我们深入研究其方法，属性和事件的描述。

方法，属性和事件

Web Notifications API通过window对象的Notification属性公开。这是一个允许我们创建通知实例的构造函数。它接受两个参数–包含通知标题的字符串和设置的可选对象。在看到如何创建实例之前，让我们看一下可以指定的设置：

body ：用于进一步指定通知目的的字符串。
lang ：指定通知的语言。其值必须符合BCP 47标准。有效字符串的示例是en-US和it-IT 。
dir ：定义消息文本的方向。它的值可以是auto ，表示方向基于浏览器的设置； ltr用于指定从左到右的方向（对于欧洲语言），或者rtl用于指定从右到左的方向（对于某些亚洲语言）。
tag ：用作ID的字符串，可用于检索，替换或删除通知。
icon ：指定将用作通知图标的图像的URL。

要创建Notification对象的实例，我们应该编写如下语句：

var notification = new Notification('Email received', {
  body: 'You have a total of 3 unread emails'
});

很简单，不是吗？

事实证明，我们刚刚学习的设置也可以作为通知实例的只读属性使用。此外， Notification对象还公开了一个名为permission的属性。 permission包含一个字符串，代表当前显示通知的权限。其值可以是以下值之一： denied （表示用户已拒绝通知），已granted （表示用户已授予许可）或default （表示用户选择未知）。

该API公开了两种方法： requestPermission()和close() 。顾名思义，前者用于请求向用户显示通知的权限，而后者则以编程方式关闭通知。 requestPermission()是Notification对象的方法，它接受一个可选的回调，该回调在用户接受或拒绝权限时执行。该选择将作为参数传递给回调，并且可以granted ， denied或default 。
close()是一个实例方法，不接受任何参数。

有时，我们可能需要在通知状态更改后立即执行操作。例如，我们可能想知道用户是否单击了通知，或何时关闭。为此，我们可以将处理程序附加到公开的四个事件之一：

onclick ：当用户单击通知时触发。
onclose ：用户或浏览器关闭通知后立即触发。
onerror ：如果通知发生错误则触发。
onshow ：显示通知时触发。

下面显示了使用这些事件的基本示例。

var notification = new Notification('Email received', {
  body: 'You have a total of 3 unread emails'
});

notification.onshow = function() {
  console.log('Notification shown');
};

浏览器兼容性

在桌面和移动设备上对Web Notifications API的支持都不是很好。在桌面设备上，Chrome和Firefox不久前实现了该API的第一个版本。但是，仅考虑API的新版本，则从Chrome 22和Firefox 22（均不带供应商前缀）开始实施。 Safari 6+还支持Web Notifications API。在移动方面，只有Firefox和Blackberry具有完全支持。测试浏览器是否支持此API只需编写如下所示的检查。

if ('Notification' in window) {
  // API supported
} else {
  // API not supported
}

演示版

在本节中，我将向您展示一个简单的演示，使您可以实际看到此API。该演示由两部分组成。在第一部分中，有一种表格可以让您编写一些文本，这些文本将在显示的通知中使用。在第二部分中，一个按钮使您可以使用演示中包含的预定义参数快速查看此API的功能。这两个请求都将触发用户许可请求。授予权限后，对于台式机，通知将显示在屏幕上；对于移动设备，通知将显示在通知栏中。

在演示的脚本部分中，我们要做的第一件事是测试浏览器是否支持Web Notifications API。如果不支持该API，我们将显示消息“不支持该API”，并禁用触发通知的两个按钮。如果浏览器实现了此API，我们将为按钮的click事件附加一个侦听器。从代码中可以看到，处理程序是相同的，并且根据触发事件的元素来更改显示的不同标题和消息：

if (event.target.id === 'button-wn-show-preset') {
  // Uses the preset parameters
} else {
  // Uses the custom parameters
}

除了显示通知之外，我们还将处理程序附加到通知实例公开的四个事件中的每个事件上。该处理程序除了在特定的textform元素中记录触发的事件和触发它的按钮外，什么也不会做。

此处提供了以下代码的实时演示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Web Notifications API Demo</title>
    <style>
      *
      {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      body
      {
        max-width: 500px;
        margin: 2em auto;
        padding: 0 0.5em;
        font-size: 20px;
      }

      h1
      {
        text-align: center;
      }

      .hidden
      {
        display: none;
      }

      #custom-notification
      {
        margin-top: 1em;
      }

      label
      {
        display: block;
      }

      input[name="title"],
      textarea
      {
        width: 100%;
      }

      input[name="title"]
      {
        height: 2em;
      }

      textarea
      {
        height: 5em;
      }

      .buttons-wrapper
      {
        text-align: center;
      }

      .button-demo
      {
        padding: 0.5em;
        margin: 1em;
      }

      #log
      {
        height: 200px;
        width: 100%;
        overflow-y: scroll;
        border: 1px solid #333333;
        line-height: 1.3em;
      }

      .author
      {
        display: block;
        margin-top: 1em;
      }
    </style>
  </head>
  <body>
    <h1>Web Notifications API</h1>
    <span id="wn-unsupported" class="hidden">API not supported</span>

    <form id="custom-notification" action="">
      <label for="title">Title:</label>
      <input type="text" id="title" name="title" />

      <label for="body">Body:</label>
      <textarea id="body" name="body"></textarea>

      <div class="buttons-wrapper">
        <button id="button-wn-show-preset" class="button-demo">Show Preset Notification</button>
        <input type="submit" id="button-wn-show-custom" class="button-demo" value="Show Custom Notification" />
      </div>
    </form>

    <h3>Log</h3>
    <div id="log"></div>
    <button id="clear-log" class="button-demo">Clear log</button>

    <script>
      if (!('Notification' in window)) {
        document.getElementById('wn-unsupported').classList.remove('hidden');
        document.getElementById('button-wn-show-preset').setAttribute('disabled', 'disabled');
        document.getElementById('button-wn-show-custom').setAttribute('disabled', 'disabled');
      } else {
        var log = document.getElementById('log');
        var notificationEvents = ['onclick', 'onshow', 'onerror', 'onclose'];

        function notifyUser(event) {
          var title;
          var options;

          event.preventDefault();

          if (event.target.id === 'button-wn-show-preset') {
            title = 'Email received';
            options = {
              body: 'You have a total of 3 unread emails',
              tag: 'preset',
              icon: 'http://www.audero.it/favicon.ico'
            };
          } else {
            title = document.getElementById('title').value;
            options = {
              body: document.getElementById('body').value,
              tag: 'custom'
            };
          }

          Notification.requestPermission(function() {
            var notification = new Notification(title, options);

            notificationEvents.forEach(function(eventName) {
              notification[eventName] = function(event) {
                log.innerHTML = 'Event "' + event.type + '" triggered for notification "' + notification.tag + '"<br />' + log.innerHTML;
              };
            });
          });
        }

        document.getElementById('button-wn-show-preset').addEventListener('click', notifyUser);
        document.getElementById('button-wn-show-custom').addEventListener('click', notifyUser);
        document.getElementById('clear-log').addEventListener('click', function() {
          log.innerHTML = '';
        });
      }
    </script>
  </body>
</html>