The JavaScript Notification interface(object type) of the Notification API is used to show notifications in the browser after getting approval from the user. You must have seen many websites ask for permission to show you notifications and once you approve you see notification message pop-ups in the bottom right corner of the browser window with some message.
This can be implemented very easily in Javascript and in this tutorial, we will learn how to do that. If you are a beginner, you can learn JavaScript on Studytonight.
How to Send Push Notifications on Browser using JavaScript
JavaScript Notification API
The whole Notification lifecycle starts with asking the client for permission to show notifications using the requestPermission() method. Whether a user has granted permission or not, can be checked using the permission property of the Notification object.
The permission property can have the following values: denied, granted, and default.
denied: means the user rejected the request for showing a notification.
granted: means the user accepted the request for showing notification and your web application notifications will be displayed in the browser.
default: means the browser doesn't know the user's choice and it's considered as denied.
Once we have permission from the user, we can create the notification by creating the Notification object like this,
var customNotification = new Notification(title, options);
The title of the notification is the main heading of the notification, followed by other options in which we can provide the following:
body: Which can be used to show main information.
icon: To add an icon for your website or brand logo. We can provide a URL for the image which should be in PNG or JPG format.
image: We can also add an image that is shown in the expanded form below the body text of the desktop notification.
requireInteration: If this is set as true, then the notification remains active until the user dismisses it or opens it.
silent: To show the notification silently without any sound effects.
vibrate: To make the device vibrate if it supports vibration.
Now let's move on to the coding part.
Notification Request Permission:
Following is the code for requesting the permission from user to show notifications:
Notification.requestPermission(permission => {
if(permission === 'granted') {
// show notification
}
});
Show Notification:
Following is the code for creating the notification object. We have included a few options, try using others, if you want.
const myNoti = new Notification('Notification Title', {
body: 'This is my notification',
icon: 'ICON_URL',
image: 'IMAGE_URL'
});
Now let's see the live example.
JavaScript Desktop Notification Example
Below is an example of showing desktop/browser notifications using JavaScript.
Conclusion
In an era defined by interactivity and seamless user experiences, JavaScript empowers developers to unlock new levels of engagement with desktop/browser push notifications. By implementing this powerful feature, you can create a vibrant channel of communication, delivering real-time updates and personalized content to captivate and retain your users.
In this tutorial, we learned how to show desktop/browser notifications in your web application using JavaScript. JavaScript Browser Objects can be used to do more such interesting things, learn about JavaScript Browser Objects on Studytonight.
Frequently Asked Questions(FAQs)
1. What are push notifications?
Push notifications are messages sent from a server to a user's device, either desktop or mobile, to deliver real-time updates, alerts, or information. They appear as pop-up notifications on the user's screen, even if they are not actively using the application or website.
2. How do push notifications work in web applications?
Push notifications in web applications rely on the use of service workers, a JavaScript-based technology. When a user subscribes to notifications, a service worker listens for push events from the server, receives them, and displays them as notifications on the user's device.
3. Can push notifications be personalized?
Yes, push notifications can be personalized based on user preferences, behavior, or specific criteria. By leveraging user data, you can tailor notifications to deliver relevant content, increasing the chances of user engagement and interaction.
4. Do all web browsers support push notifications?
Most modern web browsers support push notifications, including Chrome, Firefox, Safari, and Microsoft Edge. However, it's important to note that the implementation may vary slightly between browsers, and some older browsers may not support this feature.
5. Are there any best practices for implementing push notifications?
Yes, some best practices for implementing push notifications include obtaining user consent before subscribing them to notifications, providing clear and concise notification messages, personalizing content, respecting user preferences for frequency, and providing an easy way to unsubscribe from notifications. Additionally, it's essential to test your implementation across different devices and browsers to ensure a seamless experience for your users.
You may also like:
