Create step -by -step a notification with the help of notification constructor

In this article, we are trying to create a notification with the help of notification constructor.

But first of all, let’s explain a little more about the concept of notification API. The Notification API is a way through which we can display the user out of the web page range, at the operating system level. In fact, implementing a notification at the operating system level is possible in two ways:

  1. Using notification API with the help of notification constructor (notification created by Service Worker (Pair is not pair) and therefore cannot be used with Service Worker capabilities)
  2. Using the API Notification with the help of Shownotification, which is a subdivision of the Service Worker Registration object. (The notification created in this way is paired by Service Worker and as a result the Service Worker can create it and manage the user’s interaction with it)

Note that these notifications need to be allowed to display.

To get started and since the feature of notification has just been added to some browsers, it is necessary to check if the user browser supports this feature. The easiest way to examine this is to open the DEVTOOL browser and write the following code line on its console:

'Notification' in window

If this value is true, it means that the browser supports API Notification. Overall, we recommend that you visit the API on the MDN site to find out what browsers support a API. In addition, you can visit Caniuse.com.

Consider the following simple code:

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

Create step -by -step a notification with the help of notification constructor

User permission is required to receive notification

We said that before we want to show the user, we should get permission from him. In the section above, the following line does the following:

Notification.requestPermission()

If the user has not already allowed the browser to send the notification, by executing this command, a message will be displayed to receive the notification authorization.

The value of this license (Notification.permission) can have two modes:

  1. GRANAND: This means that the user is allowed to submit a notification and we can display the notification.
  2. Denied: This means that the user is not allowed to submit and we cannot display an appointment.

By accepting the user, this value is changed to ‘Granned’ and by rejecting the user this value changes to ‘denied’.

If the code () notification.requestPermission has not sounded, this will be equal to ‘default’. It is good to know that these licenses are issued for a particular Origin. That is, any Origin that wants to submit to us must receive a separate license. (About the concept of Origin and its difference with a site address you can visit this article from Web.dev)

Note that by accepting or rejecting this permission by the user, the value will be stored in the browser for Origin, and then the same value will be returned for the sound of the RequestPerction method. To change this value, it is necessary for the user to refer to their browser settings and so on.

The notification object provided by Window (subset of Window) allows us to create and customize the notifications.

The following code piece is the easiest mode to send a notification to the user:

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

There are ways to personalize the appearance of the Notification API that we will mention.

Add the body

Usually this section is displayed as a single line:

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

You can also refer to the MDN documentary for further reading about the capabilities of this API.

Close the notification

If we want to close the declaration we have shown, we need to store our notification in a variable so that we can refer and use it later. See the following code:

const notification = new Notification('Hey')

We can then close the notification.close code () notification.close.

© 2022 Created with AloApi Team.