Notifications API 使用入门

在此 Codelab 中,您将使用 Notifications API 以实现以下目标:

  • 请求发送通知的权限
  • 发送通知
  • 试用通知选项

浏览器支持

  • Chrome:20。 <ph type="x-smartling-placeholder">
  • Edge:14。 <ph type="x-smartling-placeholder">
  • Firefox:22. <ph type="x-smartling-placeholder">
  • Safari:7. <ph type="x-smartling-placeholder">

来源

系统会自动屏蔽嵌入式 Glitch 应用的通知,因此您无法在此页面上预览该应用。此时,您需要执行以下操作:

  1. 点击 Remix to Edit 以使项目可修改。
  2. 如需预览网站,请按查看应用。然后按 全屏 全屏

系统应该会在新的 Chrome 标签页中打开 Glitch:

屏幕截图:在新标签页中打开混剪直播应用

在学习此 Codelab 时,请更改此页面上嵌入式 Glitch 中的代码。使用已发布的应用刷新新标签页以查看更改。

熟悉起始应用及其代码

首先,在新的 Chrome 标签页中查看实时应用:

  1. 按 `Ctrl+Shift+J`(在 Mac 上,按 `Command+Option+J`)打开开发者工具。 点击控制台标签页。

    您应该会在控制台中看到以下消息:

    Notification permission is default
    

    如果您不知道这意味着什么,也不必担心。很快就会揭晓!

  2. 点击实际应用中的按钮:请求发送通知的权限发送通知

    控制台会显示“TODO”requestPermissionsendNotification 这两个函数存根中的消息。这些是您将在此 Codelab 中实现的函数。

现在,我们来看看本页嵌入式 Glitch 中的示例应用代码。 打开 public/index.js 并查看现有代码的一些重要部分:

  • showPermission 函数使用 Notifications API 来获取 并将其记录到控制台中:

    // Print current permission state to console;
    // update onscreen message.
    function showPermission() {
      let permission = Notification.permission;
      console.log('Notification permission is ' + permission);
      let p = document.getElementById('permission');
      p.textContent = 'Notification permission is ' + permission;
    }
    

    在请求权限之前,权限状态为 default。 在 default 权限状态下, 网站必须先请求并获得权限,然后才能发送通知。

  • requestPermission 函数是一个桩:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
      console.log('TODO: Implement requestPermission()');
    }
    

    您将在下一步中实现此函数。

  • sendNotification 函数是一个桩:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      console.log('TODO: Implement sendNotification()');
    }
    

    您将在实现 requestPermission 后实现此函数。

  • window.onload 事件监听器会调用 showPermission 函数 在网页加载时,在控制台和网页上显示当前权限状态:

    window.onload = () => { showPermission(); };
    

请求发送通知的权限

在此步骤中,您将添加功能以请求用户授予发送通知的权限。

您将使用 Notification.requestPermission() 方法触发一个弹出式窗口,要求用户允许或屏蔽来自您网站的通知。

  1. 将 public/index.js 中的 requestPermission 函数桩替换为以下代码:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
      Notification.requestPermission()
        .then((permission) => {
          console.log('Promise resolved: ' + permission);
          showPermission();
        })
        .catch((error) => {
          console.log('Promise was rejected');
          console.log(error);
        });
    }
    
  2. 重新加载您正用于查看当前应用的 Chrome 标签页。

  3. 在实际应用界面上,点击请求发送通知的权限。系统会显示一个弹出式窗口。

用户可以对权限弹出窗口做出三种响应之一。

用户响应 通知权限状态
用户选择允许 granted
用户选择屏蔽 denied
用户未做选择就关闭弹出式窗口 default

如果用户点击“允许”

  • Notification.permission 设置为 granted

  • 该网站将能够显示通知。

  • Notification.requestPermission 的后续调用将解析为 granted,而不显示弹出式窗口。

如果用户点击“屏蔽”

  • Notification.permission 设置为 denied

  • 网站将无法向用户显示通知。

  • Notification.requestPermission 的后续调用将解析为 denied,而不显示弹出式窗口。

如果用户关闭该弹出式窗口

  • Notification.permission 仍为 default

  • 网站将无法向用户显示通知。

  • Notification.requestPermission 的后续调用会生成更多弹出式窗口。

    但是,如果用户继续关闭弹出式窗口,浏览器可能会阻止网站,并将 Notification.permission 设置为 denied。这样一来,系统既无法向用户显示权限请求弹出窗口,也无法显示通知。

    在撰写本文时,浏览器对关闭的通知权限弹出式窗口的响应行为仍然可能发生变化。处理此问题的最佳方法是,始终请求通知权限以响应用户发起的某些互动,这样才符合其预期并了解发生了什么。

发送通知

在此步骤中,您将向用户发送通知。

您将使用 Notification 构造函数来创建新通知并尝试显示该通知。 如果权限状态为 granted,系统会显示通知。

  1. 将 index.js 中的 sendNotification 函数桩替换为以下代码:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      let title = 'Test';
      let options = {
        body: 'Test body',
        // Other options can go here
      };
      console.log('Creating new notification');
      let notification = new Notification(title, options);
    }
    

    Notification 构造函数接受两个参数:titleoptionsoptions 是一个对象,其属性表示可添加到通知中的视觉设置和数据。如需了解详情,请参阅有关通知参数的 MDN 文档

  2. 刷新您正在查看实时应用的 Chrome 标签页 然后点击发送通知按钮。 您应该会看到一条内容为 Test body 的通知。

如果您未经许可发送通知,会出现什么情况?

在此步骤中,您将添加几行代码, 。

  • public/index.js 中的 sendNotification 函数末尾, 定义新通知的 onerror 事件处理脚本:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

如需观察通知权限错误,请执行以下操作

  1. 点击 Chrome 网址栏旁边的锁形图标,然后将该网站的通知设置重置为默认设置。

  2. 点击请求发送通知的权限,这次从弹出式窗口中选择屏蔽

  3. 点击发送通知,看看会发生什么情况。 错误文本 (Could not send notification) 和事件对象会记录到控制台中。

(可选)再次重置该网站的通知权限。 您可以尝试多次请求权限并关闭弹出式窗口,看看会发生什么。

试用通知选项

现在,您已经了解了有关如何请求权限和发送通知的基础知识。 您还了解了用户响应对应用能否显示通知有何影响。

现在,您可以在创建通知时对许多可视化选项和数据选项进行实验。 下面提供了完整的可用选项。 (如需详细了解这些选项,请参阅有关 MDN 的通知文档。)

请注意,浏览器和设备以不同的方式实现这些选项, 因此有必要在不同平台上测试您的通知,看看它们的显示效果是怎样的。

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

请参阅 Peter Beverloo 的通知生成器,了解更多提示!

如果您遇到困难,请参考此 Codelab 的完整代码:glitch.com/edit/#!/codelab-notifications-get-started-completed

请查看本系列中的下一个 Codelab 使用 Service Worker 处理通知,以进一步探索!