使用 React 创建 HTML5 桌面通知

2020-05-07 08:00:00 · 飞浪

介绍通知是任何应用的重要组成部分。它们直接向用户显示信息，是让用户了解应用中正在发生的事情的好方法。在React应用中，我们使用JavaScript的通知API实现通知功能，该API

介绍

通知是任何应用的重要组成部分。它们直接向用户显示信息，是让用户了解应用中正在发生的事情的好方法。

在 React 应用中，我们使用 JavaScript 的通知 API 实现通知功能，该 API 具有多种功能，可用于不同的通知相关设置。您将在本指南中学习其中的许多功能。您还将学习如何开始使用通知、JavaScript 通知 API 的主要功能是什么以及它在实际示例中的工作原理。

JavaScript 通知 Web API 简介

JavaScript 通知 API 是一个接口，允许浏览器发出通知以使网站与用户互动并告知用户当前网页上发生的事情。

通知 API 包含多种方法，包括：

Notification.requestPermission()：我们使用它来请求在用户浏览器中显示通知的权限。
Notification.close()：我们使用 close 方法以编程方式关闭通知实例。

除了上述方法外，Notification 还包括几个属性：

身体
徽章
数据
标签
目录
图标
图像
标题
重新通知
行动

通过使用这些方法和实例属性，您可以有效地使用通知 API 向用户显示各种信息。

验证通知是否可用

在 React 应用程序中开始使用通知 API 之前，请确保它受到支持。

打开任意组件文件并粘贴以下源代码行。

      componentDidMount() {
    if (!("Notification" in window)) {
      console.log("This browser does not support desktop notification");
    } else {
      console.log("Notifications are supported");
    }
}
    

componentDidMount()方法会检查API 的Notification对象是否可以在窗口范围内访问，并根据状态触发控制台语句。

显示简单通知

使用通知可以通过带有文本、图像、按钮等元素的弹出框轻松地向用户传达消息或状态。

在向用户显示通知之前，您必须获得在用户浏览器屏幕上显示通知的权限。为此，请使用下面的源代码行来请求通知访问权限。

      componentDidMount() {
    if (!("Notification" in window)) {
      console.log("This browser does not support desktop notification");
    } else {
      Notification.requestPermission();
    }
}
    

当页面呈现时，位置弹出窗口将与两个按钮“允许”和“阻止”一起出现。

一旦用户允许通知，他们将来会收到来自该网络应用的所有通知。

现在打开组件并粘贴下面的代码行。

      import React, { Component } from "react";

class SimpleNotification extends Component {
  constructor() {
    super();
    this.showNotification = this.showNotification.bind(this);
  }

  componentDidMount() {
    if (!("Notification" in window)) {
      console.log("This browser does not support desktop notification");
    } else {
      Notification.requestPermission();
    }
  }

  showNotification() {
    new Notification('Hey')
  }

  render() {
    return (
      <div>
        <button onClick={this.showNotification}>
          Click to show notification
        </button>
      </div>
    );
  }
}

export default SimpleNotification;
    

在上面的例子中，按钮添加了 onclick 事件this.showNotification()。当用户点击按钮时，会调用简单通知类。

      showNotification() {
    new Notification('Hey')
}
    

这意味着它使用notification（）类以及一个参数作为触发后显示的通知主体。

运行示例后，输出应如下所示。

使用自定义主体和图像

到目前为止，在本指南中，您已经了解了通知 API 所使用的不同属性和方法。您还了解了一个简单的通知示例，该示例说明了通知在桌面上的显示方式。

令人惊讶的是，您还可以使用自定义正文和自定义图像来自定义通知。

下面的源代码行使用媒体元素创建通知弹出窗口。

      showNotification() {
  var options = {
    body: "This is the body of the Notification",
    icon: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?    auto=compress&cs=tinysrgb&dpr=1&w=500",
    dir: "ltr"
  };
  var notification = new Notification("Notification Demo", options);
}
    

在上面的例子中，观察到有一个名为options的对象，它包含各种对象键，例如body、icon和dir，它们决定弹出通知的外观。

现在，当您运行上述示例时，输出将如下所示。

如您所见，自定义主体以文本形式存在，通知的左侧有您指定为选项的图标和方向属性。

关闭通知

您还可以使用内置的close()函数以编程方式关闭通知弹出窗口。

确保通知存储在对某些变量的引用中。最好将该变量设为全局变量。

      var notification;

修改通知源代码。

      showNotification() {
    var options = {
      body: "This is the body of the Notification",
      icon: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      dir: "ltr"
    };
   notification = new Notification("Notification Demo", options);
}
    

修改上述源代码后，现在您可以像这样关闭通知。

      closeNotification() {
    notification.close();
}
    

按钮单击事件时将调用函数closeNotification() ，其中通知是一个全局变量，您已在其中定义了通知的引用。

因此，这就是如何执行完整的通知机制，从创建和自定义通知到以编程方式关闭它。

结论

使用 JavaScript 的通知 Web API，可以轻松在任何 React 应用中执行通知，并且您可以使用各种属性对其进行自定义。在本指南中，您获得了有关通知的完整介绍，包括创建简单通知和修改其正文。希望本指南对您有所帮助。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用 React 创建 HTML5 桌面通知

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

componentDidMount() { if (!("Notification" in window)) { console.log("This browser does not support desktop notification"); } else { console.log("Notifications are supported"); } }

componentDidMount() { if (!("Notification" in window)) { console.log("This browser does not support desktop notification"); } else { Notification.requestPermission(); } }

import React, { Component } from "react"; class SimpleNotification extends Component { constructor() { super(); this.showNotification = this.showNotification.bind(this); } componentDidMount() { if (!("Notification" in window)) { console.log("This browser does not support desktop notification"); } else { Notification.requestPermission(); } } showNotification() { new Notification('Hey') } render() { return ( <div> <button onClick={this.showNotification}> Click to show notification </button> </div> ); } } export default SimpleNotification;

showNotification() { var options = { body: "This is the body of the Notification", icon: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg? auto=compress&cs=tinysrgb&dpr=1&w=500", dir: "ltr" }; var notification = new Notification("Notification Demo", options); }

showNotification() { var options = { body: "This is the body of the Notification", icon: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", dir: "ltr" }; notification = new Notification("Notification Demo", options); }