Use the HTML5 Notification API to create a web Notification tutorial, html5notification

Use the HTML5 Notification API to create a web Notification tutorial, html5notification
This article describes how to use the HTML5 Notification API to create web notifications. Examples include the CSS and Javascript code to be used. For more information, see

A prompt box is displayed at the bottom right of the screen whenever you receive a new email when using Gmail for the web page. With the Notification API provided by html5.
Ensure browser support

If you develop on a browser of a specific version, I suggest you first go to caniuse to check the browser's support for Notification APIs, this prevents you from wasting your time on an unusable API.
How to start
 

Copy the content to the clipboard using JavaScript Code

1. Var notification = new Notification ('notification title ',{
2. Body: 'Your message'
3. });

The above code constructs a simple notification bar. The first parameter of the constructor sets the title of the notification bar, and the second parameter is an option object. The following attributes can be set for this object:

• Body: Set the body of the notification bar.
  Dir: defines the display direction of the text in the notification bar. It can be set to auto (auto), ltr (left to right), and rtl (Right to left ).
  Lang: language used in the notification bar. The value of this attribute must belong to the BCP 47 language tag .)
  Tag: assign an ID value to the notification bar to facilitate searching, replacing, or removing the notification bar.
  Icon: Set the URL of the image as the icon in the notification bar.

Get Permissions

You need to apply for permissions to the user before displaying the notification bar. The notification bar can appear on the screen only when the user permits it. The following return values apply for permission application processing:

• Default: the user's processing result is unknown, so the browser will regard the user as rejecting the pop-up notification bar. ("Browser: I will not notify you if you do not require notification ")
  Denied: the notification bar is displayed. ("User: scroll out of my screen ")
  Granted: you can bring up a notification bar. ("User: Welcome! I'm glad to be able to use this notification feature ")
  
  

Copy the content to the clipboard using JavaScript Code

1. Notification. requestPermission (function (permission ){
2. // Display notification here making use of constructor
3. });

Create a button with HTML
 

Copy XML/HTML Code to clipboard

1. <Button id = "button"> Read your notification </button>

Do not forget CSS
 

Copy the content to the clipboard using CSS Code.

1. # Button {
2. Font-size: 1.1rem;
3. Width: 200px;
4. Height: 60px;
5. Border: 2px solid # df7813;
6. Border-radius: 20px/50px;
7. Background: # fff;
8. Color: # df7813;
9. }
10. # Button: hover {
11. Background: # df7813;
12. Color: # fff;
13. Transition: 0.4 s elapsed;
14. }

All Javascript code is as follows:
 

Copy the content to the clipboard using JavaScript Code

1. Document. addEventListener ('domainloaded', function (){
2. Document. getElementById ('click'). addEventListener ('click', function (){
3. If (! ('Notification' in window )){
4. Alert ('Sorry bro, your browser is not good enough to display notification ');
5. Return;
6. }
7. Notification. requestPermission (function (permission ){
8. Var config = {
9. Body: 'Thanks for clicking that button. Hope you liked .',
10. Icon: 'https: // ingress ',
11. Dir: 'auto'
12. };
13. Var notification = new Notification ("Here I am! ", Config );
14. });
15. });
16. });

From this code, we can see that if the browser does not support the Notification API, a warning will appear when you click the button. Sorry, sorry. Your browser does not support the notification function very well. "(Sorry bro, your browser is not good enough to display notification ). Otherwise, after obtaining the user's permission, our self-made notification bar can appear on the screen.

Why do you need to manually close the notification bar?

For this problem, we can use the setTimeout Function to set a time interval so that the notification bar can be closed at regular intervals.
 

Copy the content to the clipboard using JavaScript Code

1. Var config = {
2. Body: 'Today too your guys got eyes on me, you did the same thing. Thanks ',
3. Icon: 'icon.png ',
4. Dir: 'auto'
5. }
6. Var notification = new Notification ("Here I am! ", Config );
7. SetTimeout (function (){
8. Notification. close (); // closes the notification
9. },5000 );

That's what we should say. If you want to learn more about the Notification API, read the following page:

MDN
Paul lund's tutorial on notification API

View the demo on CodePen

You can see the demo written by Prakash (@ imprakash) on CodePen.