How to Send Push Notifications With JavaScript
JavaScript notifications are a way to send messages to your users in real-time. You can use them to notify about your website updates, new chat messages, emails, or any social media activities. You can also use notifications for calendar reminders (such as an approaching meeting on Google Meet or Zoom).
Learn how to create event notifications in JavaScript and send them to your phone or web browser. You’ll achieve this using built-in, client-side JavaScript—no external library required!
Requesting Permission to Send Notifications
To create a notification, you need to call theNotificationclass to create an object. It gives you access to various properties and methods that you can use to configure your notification. But before creating a notification, you’ll need to first request permission from the user.
The following JavaScript will request permission to send user notifications. TherequestPermissioncall will return a message indicating whether the browser allows notifications or not:
When you click on the button, you may get an alert that saysdenied. This means that the browser has denied JavaScript from sending event notifications. The permission status isdeniedfor cases where the user has explicitly prevented the sites to send notifications (through browser settings) or the user is surfing in incognito mode.
For such cases, it’s better to respect the user’s decision for denied notifications and you should refrain from further bothering them.
Sending Basic Notifications
You create a push notification by creating aNotificationobject with the new keyword. For a deep dive into object-oriented programming, you can refer to our guide onhow to create classes in JavaScript.
Since you’d send notifications only if permission is granted, you’d need to wrap it inside anifcheck.
Click on the button, and you’ll get a push notification in the bottom right corner of your web browser with the specified text.
This is the most basic way to create notifications, and it works on your phone as well as on your computer. Let’s look at some advanced notification properties.
Advanced Notifications Properties
In addition to the notification title, you can also pass an options argument to the constructor when creating the notification object. This options argument must be an object. Here, you can add several options to customize your notification.
The body Property
The first property you should know isbodyproperty. You’d use this to add a body to your notification, typically to convey more information in the form of text. Here’s a simple example:
If you run this code, the body text will show in the push notification, under theExample notificationheader.
The data Attribute
Often times you might want to add custom data to notifications. Maybe you want to display a particular error message if permission is denied, or store data you received from an API. For all such cases, you can use thedataproperty to add custom data to your notification.
you may access the data from thedataproperty similarly to as shown in the above code block (inside thealert()).
You can also bind event listeners to your notifications. For example, the following event listener executes whenever you close the push notification. The callback function simply logs the custom message.
This is an excellent way to pass data around if you need to do something when someone closes a notification or clicks on it. Apart from thecloseevent (which executes when you close the notification), you should keep theseevent listenersin your mind:
The icon Property
Theiconproperty is for adding an icon to the push notification. Assuming you have an icon logo namedlogo.pngin the current directory, you can use it in your notifications like so:
If you’re struggling to link to your files, you need tounderstand the working of relative URLs and absolute URLs.
When you save the file, refresh the browser, and click the button, the notification will have the image displayed on the left-hand side of the header and body.
The tag Attribute
When you set thetagattribute in your notification, you’re basically giving the notification a unique ID. Two notifications cannot exist together if they have the same tag. Instead, the newest notification will overwrite the older notification.
Consider our previous button example (without a tag). If you were to click the button three times in quick succession, the three notifications will appear, and they’ll stack on top of one another. Now let’s say you added the following tag to the notification:
If you were to click the button again, only one notification box will appear. Every subsequent click will overwrite the prior notification, so only one notification will show no matter how many times you click the button. This is useful if you want to add dynamic data (likeMath.random()) to the body:
Every time you click the button, a new number will appear. Use the tag property if you want to overwrite a current notification with new information inside of it. In a messaging app, for example, you may use the tag attribute to overwrite the notification with new messages.
An Example of Push Notification Using JavaScript
The following example detects anytime you lose focus on your page (i.e. when you close the page or open a new tab). In this case, the code sends a notification asking you to return:
Whenever you lose focus on that page, you’ll get a notification asking you to come back to the page. But once you return to the page, theelseblock executes, which closes the push notification. This technique is excellent in situations where you want to give the user some kind of information after leaving your page.
Learn More About JavaScript
Event notification is just one of the numerous features you can find in JavaScript. In order to be really good with notifications, you must first grasp the fundamental language features and syntax of JavaScript. Building simple games is one of the ways through which you can boost your skills and familiarize yourself with the basic concepts of the language.
By building these fun game projects, you can make programming less tedious and also hone your skills at the same time.
I plugged random USB devices into my phone and was pleasantly surprised by how many actually worked.
Anyone with more than a passing interest in motorsports must see these films.
I found my TV was always listening—so I shut it down.
you could’t call this offline, Notion.
Sometimes the smallest cleaning habit makes the biggest mess.
