Mark Notification Tray Item Seen
Fine-grained Tracking
Update seen status for individual notification items
User Interaction
Track when users click or interact with specific notifications
Overview
The notification tray itemmarkSeen()
method updates the seen status of a specific notification tray item, enabling fine-grained read tracking. Use this when a user clicks or interacts with an individual notification.
Each tray item has its own lastSeenAt
timestamp, which is recorded on the server when this method is called.
Implementation Guide
Usage Patterns
🎯 When to Mark Items as Seen
🎯 When to Mark Items as Seen
User Interaction
Primary Trigger
- User taps/clicks on notification item
- User navigates to referenced content
- User explicitly dismisses notification
View Tracking
Secondary Triggers
- Item appears in viewport for extended time
- User scrolls past item slowly
- Item receives focus in keyboard navigation
📊 Analytics Integration
📊 Analytics Integration
Track notification engagement patterns to optimize user experience:
🎨 UI State Management
🎨 UI State Management
Visual Feedback Patterns
Unread Indicators
- Colored dots or badges
- Different background colors
- Bold text styling
Loading States
- Spinner during API call
- Disabled interaction
- Progress indicators
Seen Confirmation
- Immediate visual update
- Smooth animations
- Clear visual hierarchy
CSS Implementation Example
Error Handling
Common Error Scenarios
Common Error Scenarios
Network Issues
Handle offline scenarios and connectivity problems
Item State Conflicts
Manage cases where item state changes during API call
Permission Errors
Handle authentication and authorization failures
Server Errors
Manage server-side processing issues
Error Handling Implementation
Error Handling Implementation
Best Practices
🎯 Implementation Guidelines
🎯 Implementation Guidelines
Timing
When to Call
- User clicks/taps notification item
- User navigates to referenced content
- User explicitly dismisses notification
- Item is viewed for significant duration
UX Considerations
User Experience
- Provide immediate visual feedback
- Handle loading states gracefully
- Implement retry mechanisms for failures
- Maintain consistent visual hierarchy
📊 Performance Tips
📊 Performance Tips
- Batch Operations: Consider batching multiple mark-seen calls when possible
- Debounce Rapid Calls: Prevent duplicate API calls for the same item
- Local State Updates: Update UI immediately, sync with server asynchronously
- Error Recovery: Implement exponential backoff for failed requests
🎨 UI Design Patterns
🎨 UI Design Patterns
- Clear Visual Hierarchy: Distinguish between seen and unseen items clearly
- Smooth Transitions: Use animations for state changes
- Loading Indicators: Show progress for mark-seen operations
- Accessibility: Ensure seen/unseen states are accessible to screen readers
🔧 Development Tips
🔧 Development Tips
- State Management: Keep local UI state in sync with server state
- Error Handling: Provide meaningful error messages and recovery options
- Analytics: Track interaction patterns for product insights
- Testing: Test offline scenarios and edge cases thoroughly