😍 Web Notifications web API 😍

UpdatedMarch 27, 2023

•2 min read•View as Markdown

😍 Web Notifications web API 😍

ATUL KUMAR SINGH

Dedicated and efficient full stack developer with 8+ years of experience in application layers, presentation layers, and databases. Developed multiple web applications as a full stack developer to process, analyze, and render data visually. Worked on query optimization for the betterment of existing sections.

Have you ever visited a website and saw a notification popup on your screen? That's the power of Web Notifications web API!

What are Web Notifications?

Web Notifications are a type of notification that websites can send to users, regardless of whether the website is open or not. These notifications appear as a small popup window on the user's screen, providing real-time updates and alerts. There are lots of 3rd parties web notification providers available but we are going to use our web API.

How to implement Web Notifications on our site?

easy-hai

Yeah, it's really easy to get started with web notification. Let's learn how to integrate it into our website.

web-notication

On the above code, we first request permission from the user to send notifications using Notification.requestPermission(). Once permission is granted, we create a new notification with the Notification constructor, specifying the title, body, and icon for the notification. Always ask for the user's permission before sending notifications.

Overall, Web Notifications are a powerful tool for enhancing user engagement on the web. By providing real-time alerts and updates, websites can keep users informed and engaged, leading to a better overall user experience.

https://codepen.io/Atul-Rajput/pen/yLxweaM

Thanks a lot for reading till the end 🙏 If you liked the article, please give likes and share it with your others.

Email: atul19251@gmail.com

Web: https://iamatul.netlify.app/

Github: https://github.com/iamrajput

LinkedIn: https://www.linkedin.com/in/atul-kumar-singh-673357102/

#web-development #javascript #reactjs #webdevelopment #apis

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

🔐 SSL Pinning in React Native (iOS + Android) – A Practical Implementation

When we build mobile apps, we usually call APIs over HTTPS and assume everything is secure. But here’s the reality:Even with HTTPS, your app can still be vulnerable to Man-in-the-Middle (MITM) attacks

Mar 13, 20264 min read

🔐 SSL Pinning in React Native (iOS + Android) – A Practical Implementation

5 Deadly React.js Mistakes Every Beginner Makes (And How to Fix Them)

React.js is one of the most popular JavaScript libraries for building user interfaces. But as powerful as it is, many beginners fall into common traps that slow down their learning—and their apps. If you’ve been struggling with React, chances are you...

Jul 6, 20253 min read

5 Deadly React.js Mistakes Every Beginner Makes (And How to Fix Them)

🚀 Frontend Tip of the Day: Enhancing Performance with React.memo() 🚀

Did you know you can boost your React app's performance with just a single line of code? Meet React. memo()*! 🧠* What It Does:React.memo() is a higher-order component that optimizes your functional components by memoizing them. Essentially, it preve...

Oct 4, 20241 min read

🚀 Frontend Tip of the Day: Enhancing Performance with React.memo() 🚀

Ready to Fly?✈️ Middleware in Express.js is Your Boarding Pass!🎫

Imagine your web app as a passenger at an airport. Just like a flight passenger has to pass through several checkpoints before boarding the plane, an HTTP request has to pass through several "middlewares" before getting a response. Let’s walk through...

Sep 30, 20243 min read

Ready to Fly?✈️ Middleware in Express.js is Your Boarding Pass!🎫

Mastering Node.js Modules: A Clear Look at CommonJS vs ES Modules

If you're just starting with Node.js, you might have come across two different ways to import and export code: CommonJS and ES Modules. They might seem a bit confusing at first, but once you understand the basics, it’s really not that hard. What Are ...

Aug 16, 20242 min read

Mastering Node.js Modules: A Clear Look at CommonJS vs ES Modules

D

Dev Station

29 posts

Dedicated and efficient full stack developer with 6+ years of experience in application layers, presentation layers, and databases 🙂