Skip to content

feat: add native notifications for promise toasts #1216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

fariborz0015
Copy link

@fariborz0015 fariborz0015 commented Mar 2, 2025

Pull Request Title:

Add Browser Notification Support to toast.promise

Description:

This PR introduces an optional browser notification feature for toast.promise. When enabled, it allows developers to trigger native browser notifications upon promise resolution or rejection. This is particularly useful for notifying users who have switched to another tab or are not actively viewing the application.

Key Features:

  • New browserNotification option inside toast.promise:
    • Supports custom titles and notification options for success and error states.
    • Can be configured to trigger notifications only if the user is inactive in the tab.
  • New utility functions added:
    • isUserActiveInTab: Determines if the user is currently active in the tab.
    • createBrowserNotification: Handles the creation of browser notifications with proper permission handling.
  • Seamless integration with existing toast.promise behavior.
  • Test coverage added for various scenarios, including:
    • User is inactive, and a notification is triggered.
    • User is active, and no notification is sent.
    • Permission handling (granted/denied cases).
    • Browser support fallback for environments without Notification API.

Usage Example:

toast.promise(Promise.resolve('Task Completed!'), {
  pending: 'Processing...',
  success: 'Task done!',
  error: 'Something went wrong!',
  browserNotification: {
    success: {
      title: 'Task Completed!',
      options: { body: 'Your process has finished successfully.' }
    },
    error: {
      title: 'Error!',
      options: { body: 'Something went wrong with your process.' }
    },
    jusIfUserNotInActiveTab: true // Send notification only if the user is inactive
  }
});

Why This Change?

Users might not always stay on the same tab while waiting for an operation to complete. This feature improves user experience by ensuring they receive real-time updates even when they switch tabs.

Affected Files:

  • src/core/toast.ts → Integrated browserNotification logic.
  • src/utils/userActionInfo.ts → Added isUserActiveInTab and createBrowserNotification.
  • src/utils/index.ts → Exported new utility functions.
  • src/core/toast.cy.tsx → Added test cases for browser notifications.

Checklist:

  • Feature implemented and tested
  • Code follows the project's style guidelines
  • No breaking changes introduced
  • Documentation updated (README.md)

Looking forward to your review! 🚀

@fariborz0015 fariborz0015 changed the title feat: add browser notifications for promise toasts feat: add native notifications for promise toasts Mar 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant