Notification API guide

The Notifications API is responsible for displaying user system notifications. This is the interface provided by the browser to developers, allowing messages to be displayed to the user even if the website is not opened in the browser.

Introduction to Notification API

ThisNotification APIIs the interface provided by the browser to the developer,Display a message to the user, Even if you don’t open the website/web application in your browser, you must get their permission.

These messages are consistent and native, which means that the recipient is accustomed to their UI and UX, they are system-wide, not specific to your site.

CombinePush APIThis technology may be a successful way to increase user engagement and enhance application functionality.

Notifications API andservice personnel, Because they are required for push notifications. youwere ableThe Notifications API is used without Push, but its use cases are limited.

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()

Authority

To display notifications to users, you must have permission to do so.

ThisNotification.requestPermission()The method call requested this permission.

You can call

Notification.requestPermission()

In this very simple form, it will display a permission grant panel-unless permission has been granted before.

To perform certain operations during user interaction (allow or deny), you can add processing functions 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 the callback, we also look forward tocommitted to. This is because of different implementationsNotification.requestPermission()The past version, now we have to support it, because we don’t know which version is running in the browser. Therefore, in order to save the content in one place, I extracted the permission processingprocess()Features.

In both cases, a function is passedpermissionA string that can have one of the following values:

  • granted: The user accepted, wewere ableShow permissions
  • denied: The user refused, weCan'tShow any permission

These values can also be checkedNotification.permissionAttribute, if the user has been granted permission, the value of this attributegrantedordenied, But if you haven’t calledNotification.requestPermission()But it will solvedefault.

Create notification

ThisNotificationExposed objectswindowObjects in the browser allow you to create notifications and customize their appearance.

This is the simplest example and can be used after you request permission:

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

Create a notification

You can customize notifications with some options.

Add body

First, you can add a body, usually in a single line:

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

Add a body to the notification

Add picture

You can add an icon attribute:

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

Add an image to the notification

More customization options with platform-specific attributes can be found in the following locations:https://developer.mozilla.org/docs/Web/API/Notification

Close notification

You may want to close the notification after opening it.

To do this, create a reference to the notification you opened:

const n = new Notification('Hey')

Then you can turn it off with the following command:

n.close()

Or timeout:

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

Download mine for freeJavaScript beginner's manual


More browser tutorials: