rtems api用户指南_通知API指南

rtems api用户指南

• Introduction to the Notification API

  通知API简介

• Permissions

  权限

• Create a notification

  建立通知

  • Add a body

    添加身体

  • Add an image

    新增图片

  Create a notification

  建立通知

• Close a notification

  关闭通知

通知API简介 (Introduction to the Notification API)

The Notifications API is the interface that browsers expose to the developer to allow showing messages to the user, with their permission, even if the web site / web app is not open in the browser.

Notifications API是浏览器提供给开发人员的接口，即使未在浏览器中打开网站/ Web应用程序，浏览器也可以通过该接口向用户显示消息 。

Those messages are consistent and native, which means that the receiving person is used to the UI and UX of them, being system-wide and not specific to your site.

这些消息是一致且本机的，这意味着接收人习惯于它们的UI和UX，它们是系统范围的，而不是特定于您的站点的。

In combination with the Push API this technology can be a successful way to increase user engagement and to enhance the capabilities of your app.

与Push API结合使用时，该技术可以成为增加用户参与度并增强应用程序功能的成功方法。

The Notifications API interacts heavily with Service Workers, as they are required for Push Notifications. You can use the Notifications API without Push, but its use cases are limited.

Notifications API与Service Worker进行了大量交互，这是Push Notifications所必需的。 您可以在不使用Push的情况下使用Notifications API，但是其用例有限。

if (window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission((status) => {
    // status is "granted", if accepted by user
		var n = new Notification('Title', {
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		})
	})
}

n.close()

权限 (Permissions)

To show a notification to the user, you must have permission to do so.

要向用户显示通知，您必须具有这样做的权限。

The Notification.requestPermission() method call requests this permission.

Notification.requestPermission()方法调用请求此权限。

You can call

你可以打电话

Notification.requestPermission()

in this very simple form, and it will show a permission permission granting panel - unless permission was already granted before.

以这种非常简单的形式，它将显示一个权限授予面板-除非之前已经授予了权限。

To do something when the user interacts (allows or denies), you can attach a processing function to it:

要在用户进行交互(允许或拒绝)时执行某些操作，可以向其附加处理功能：

const process = (permission) => {
  if (permission === "granted") {
    // ok we can show the permission
  }
}

Notification.requestPermission((permission) => {
  process(permission)
}).then((permission) => {
  process(permission)
})

See how we pass in a callback and also we expect a promise. This is because of different implementations of Notification.requestPermission() made in the past, which we now must support as we don’t know in advance which version is running in the browser. So to keep things in a single location I extracted the permission processing in the process() function.

看看我们如何传递回调，也希望有一个诺言 。 这是因为过去使用了Notification.requestPermission()的不同实现，我们现在必须支持这些实现，因为我们事先不知道浏览器正在运行哪个版本。 因此，为了将内容保留在一个位置，我在process()函数中提取了权限处理。

In both cases that function is passed a permission string which can have one of these values:

在两种情况下，都会向该函数传递一个permission字符串，该permission字符串可以具有以下值之一：

• granted: the user accepted, we can show a permission

  granted ：用户已接受，我们可以显示权限

• denied: the user denied, we can’t show any permission

  denied ：用户被拒绝，我们无法显示任何权限

Those values can also be retrieved checking the Notification.permission property, which - if the user already granted permissions - evaluates to granted or denied, but if you haven’t called Notification.requestPermission() yet, it will resolve to default.

还可以通过查看Notification.permission属性来检索这些值，如果用户已经被授予权限，该属性将评估为granted或denied ，但是如果您尚未调用Notification.requestPermission() ，它将解析为default 。

建立通知 (Create a notification)

The Notification object exposed by the window object in the browser allows you to create a notification and to customize its appearance.

浏览器中的window对象公开的Notification对象允许您创建通知并自定义其外观。

Here is the simplest example, that works after you asked for permissions:

这是最简单的示例，可以在您请求权限后使用：

Notification.requestPermission()
new Notification('Hey')

You have a few options to customize the notification.

您可以通过一些选项来自定义通知。

添加身体 (Add a body)

First, you can add a body, which is usually shown as a single line:

首先，您可以添加一个正文，通常以单行显示：

new Notification('Hey', {
  body: 'You should see this!'
})

新增图片 (Add an image)

You can add an icon property:

您可以添加一个图标属性：

new Notification('Hey', {
  body: 'You should see this!',
  icon: '/user/themes/writesoftware/favicon.ico'
})

More customization options, with platform-specific properties, can be found at https://developer.mozilla.org/docs/Web/API/Notification

可以在https://developer.mozilla.org/docs/Web/API/Notification中找到更多具有平台特定属性的自定义选项

关闭通知 (Close a notification)

You might want to close a notification once you opened it.

您可能想在打开通知后关闭它。

To do so, create a reference to the notification you open:

为此，请创建对您打开的通知的引用：

const n = new Notification('Hey')

and then you can close it later, using:

然后可以使用以下命令将其关闭：

n.close()

or with a timeout:

或超时：

setTimeout(n.close(), 1 * 1000)

翻译自: https://flaviocopes.com/notifications-api/

rtems api用户指南