Notifications play a crucial role in enhancing the user experience in web applications. JavaScript provides a Notification API that allows developers to generate desktop or mobile notifications. In this blog post, we will explore how to leverage this API to create custom notifications using JavaScript.
The Notification API is a powerful tool provided by modern browsers that enable developers to display system notifications on desktop and mobile devices. Before diving into the implementation details, it's important to understand the fundamental aspects of the Notification API:
1. Requesting Permission: The Notification API requires explicit user permission to display notifications. By default, browsers prompt users for permission when a notification is triggered.
2. Notification Object: Notifications are represented by the Notification object, which allows customization of various properties such as title, body, icon, and actions.
3. Event Handling: The Notification API provides events like "click" and "close" that allow developers to respond to user interactions with notifications.
Requesting Notification Permission:
To begin generating notifications, it's essential to request the user's permission. This can be done using the ‘Notification.requestPermission()’ method. It's important to handle the various permission states, including "granted," "denied," or "default." Depending on the permission state, developers can adjust the application's behavior, such as displaying alternative content or prompting users to grant permission.
const permission = await Notification.requestPermission();
console.log(permission); // granted or denied
Creating and Displaying Notifications:
Once the user has granted permission, developers can create and display notifications using the Notification constructor and the show() method. The Notification constructor takes parameters such as the notification's title and options object, which can include properties like the notification's body, icon, and actions.
For example, to create a simple notification with a title and body, the code would look like this:
const notification = new Notification('New Message', {
body: 'You have received a new message.',
});To display the notification, call the show() method on the notification object:
notification.show();
Notification Sound
There is no support for Notification to play a sound when the notification is shown. Hence, we should set a sound in .mp3 format to play when a notification is triggered. We need to make use of the HTMLAudioElement API to play the notification sound.
const sound = new Audio("sound.mp3");
const notification = new Notification("New message", {
body: "You have got a new message",
icon: "logo.png",
});
notification.addEventListener("show", () => {
sound.play();
console.log("Notification displayed");
});Handling Notification Events:
The notifications can be set to be interactive, which makes it possible to take direct actions by the users. The Notification API provides events like "click," "close," and "action" that can be handled to respond to user interactions. For instance, the "click" event can be used to open a new window or bring focus to the application. The "action" event allows developers to define custom actions that users can perform from the notification itself, such as marking a message as read or dismissing the notification.
const notification = new Notification("New message", {
body: "You have got a new message",
icon: "logo.png",
});
notification.addEventListener("click", () => {
console.log("User opened the notification");
notification.close(); // close notification when user clicks on it
});
notification.addEventListener("close", () => {
console.log("User closed the notification");
});
notification.addEventListener("show", () => {
console.log("Notification displayed");
});
notification.addEventListener("error", (e) => {
console.log("Some error occurred", e);
});The JavaScript Notification API empowers developers to create engaging and informative notifications that enhance the user experience. By understanding how to request permission, create and display notifications, and handle events, developers can effectively leverage this API to deliver timely and interactive notifications within their web applications.