通知API指南

Notifications API负责显示用户系统通知。这是浏览器提供给开发人员的界面,即使未在浏览器中打开网站,也允许向用户显示消息。

通知API简介

通知API是浏览器提供给开发人员的界面,向用户显示消息,即使没有在浏览器中打开网站/网络应用程序,也必须获得他们的许可。

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

结合推送API这项技术可能是增加用户参与度并增强应用程序功能的成功方法。

Notifications API与服务人员,因为它们是推送通知所必需的。你能够在不使用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()

权限

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

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

你可以打电话

Notification.requestPermission()

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

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

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

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

看看我们如何传递回调,我们也期待承诺。这是因为不同的实现Notification.requestPermission()过去的版本,现在我们必须支持,因为我们不知道浏览器中正在运行哪个版本。因此,为了将内容保存在一个位置,我在其中提取了权限处理process()功能。

在这两种情况下,都会传递一个函数permission可以具有以下值之一的字符串:

  • granted:用户接受了,我们能够显示权限
  • denied:用户拒绝了,我们不能显示任何许可

这些值也可以通过检查Notification.permission属性,如果用户已被授予权限,则该属性的值为granted或者denied,但如果您尚未致电Notification.requestPermission()但是,它将解决default

建立通知

Notification被暴露的物体window浏览器中的对象允许您创建通知并自定义其外观。

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

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

Create a notification

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

添加身体

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

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

Add a body to the notification

新增图片

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

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

Add an image to the notification

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

关闭通知

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

为此,请创建对您打开的通知的引用:

const n = new Notification('Hey')

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

n.close()

或超时:

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

免费下载我的JavaScript初学者手册


更多浏览器教程: