The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create custom desktop notifications

Written by

Bernardo Palos

in

Creating custom desktop notifications can enhance user engagement and improve the user experience for web or desktop applications. Here’s how to create custom desktop notifications for both web applications using JavaScript and desktop applications using Python (with plyer).

1. Web Application: Custom Desktop Notifications with JavaScript

Step-by-step Implementation:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Desktop Notification</title>
</head>
<body>
  <button onclick="showNotification()">Show Notification</button>

  <script>
    function showNotification() {
      // Request permission if not already granted
      if (Notification.permission !== 'granted') {
        Notification.requestPermission();
      } else {
        const notification = new Notification("Custom Alert!", {
          body: "You have a new message!",
          icon: "https://via.placeholder.com/100" // Optional icon
        });

        notification.onclick = () => {
          window.focus();
          notification.close();
        };
      }
    }
  </script>
</body>
</html>

Key Features:

  • Uses the Notification API

  • Allows clickable notifications

  • Supports optional icons and messages

Note: Most browsers require the site to be served over HTTPS and for the user to interact with the page (like a button click) before notifications can be shown.

2. Desktop Application: Custom Notifications in Python with plyer

Installation:

bash
pip install plyer

Python Script Example:

python
from plyer import notification

notification.notify(
    title='Reminder',
    message='Meeting starts in 15 minutes!',
    app_name='CustomNotifier',
    app_icon=None,  # path to .ico file (Windows) or .png (Linux/Mac)
    timeout=10
)

Features:

  • Cross-platform support (Windows, macOS, Linux)

  • Allows app name and icons

  • Timeout control for the duration

3. Optional: Enhancing with Sounds or Interactions (Advanced Web Version)

javascript
function showEnhancedNotification() {
  if (Notification.permission === "granted") {
    const options = {
      body: "New email from John Doe",
      icon: "/path-to-icon.png",
      vibrate: [100, 50, 100],
      data: { url: "https://your-site.com/inbox" }
    };
    
    const notif = new Notification("Mail Notification", options);
    
    notif.onclick = function(event) {
      event.preventDefault(); 
      window.open(notif.data.url, '_blank');
    };
  }
}

Best Practices for Custom Desktop Notifications

  • User Permission: Always request user permission before sending notifications.

  • Clear Purpose: Ensure the notification is timely and relevant.

  • Rate Limiting: Avoid flooding users with too many alerts.

  • Customization: Use icons, titles, and sounds to enhance engagement.

  • Security: Avoid exposing sensitive data in notifications.

This approach allows you to create simple or advanced notifications in both web and desktop environments, tailored to your app’s needs.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About