In this post I can explain to you how we can show implement web and mobile browser notification Notification using Web Notification API. With help of Browser notification, you can send a notification to your user in your web application. You can follow simple steps to show browser notification in your application.

Send Browser Notification

Step 1. Create a simple layout using HTML as shown below.

Output:-

Display Browser Notification Using Web Notification API

Step 2. Now we can add javascript and ask for permission to allow browser notification for your website. Add <script> and add below code and ask for permission

after implement above code save and run when you refresh your page you get pop like as shown in the image below

Display Browser Notification Using Web Notification API

Click on allow.

Step 3. Now we once you allow your site to show notification we can show notification, to show notification we need to add clicklistener on a link we add in our template(step 1) . to add click listener add below code

Step 4. Now we can create a function through which we can show notification on click on button add below code in your script and call inside your click listener

Complete script code:-

Now refresh your page and click on the button and you get the output as shown in below image.

Display Browser Notification Using Web Notification API