LO-063 [Easy]: Dynamic Page Titles and Favicon Notifications

[Kuldeeep18]

Description

When outreach managers are working in other tabs, we want to grab their attention when background tasks complete (like CSV imports). We want to implement dynamic page title changes and favicon badge updates.

User & Contributor Value

• Contributors: HTML5 page visibility API, dynamic document title modifications, and canvas-based favicon drawing.
• Users: Interactive experience that alerts users to completed background tasks without spamming system notifications.

Code Locations

• frontend/main.js

Implementation Guide

1. Write JS using the document.addEventListener('visibilitychange') listener.
2. If the user leaves the tab, change the title to "Come back to LeadOrbit!".
3. Optionally, update the favicon to display a small red dot badge when new notifications arrive.

[manikanta-tamminana]

Hi @Kuldeep18,

I would like to work on this issue under GSSoC.

My implementation plan is:

• Use the Page Visibility API (visibilitychange) to detect when users switch away from the application tab.
• Dynamically update the document title (e.g., "Come back to LeadOrbit!") while the tab is inactive and restore the original title when the user returns.
• Implement favicon badge updates using a canvas-based approach to display a notification indicator when background tasks complete.
• Ensure the notification state is updated efficiently without affecting application performance.
• Maintain a clean and user-friendly experience by drawing attention only when relevant background events occur.

This enhancement will improve user engagement and help users stay informed about completed background operations without relying on intrusive browser notifications. Could you please assign this issue to me?

Thank you! 🚀