Notifications API 使用入门

在此 Codelab 中,您将使用 Notifications API 的基本功能来:

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

浏览器支持

  • Chrome:20.
  • Edge:14.
  • Firefox:22.
  • Safari:7.

来源

系统会自动屏蔽嵌入的 Glitch 应用发送的通知,因此您将无法在此页面上预览该应用。请改为执行以下操作:

  1. 点击 Remix to Edit 即可修改项目。
  2. 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)全屏

Glitch 应会在新标签页中打开:

显示在新标签页中重新混剪的直播应用的屏幕截图

在完成此 Codelab 的过程中,请更改此页面中嵌入的 Glitch 中的代码。刷新包含实时应用的新标签页,即可查看更改。

熟悉起始应用及其代码

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

  1. 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。 点击控制台标签页。

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

    Notification permission is default

    如果您不了解这意味着什么,请不要担心,一切很快就会揭晓!

  2. 点击正式版应用中的按钮:请求发送通知的权限发送通知

    控制台会输出两个函数桩(requestPermissionsendNotification)中的“TODO”消息。这些是您将在此 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:使用服务工作线程处理通知