Frontend Architecture

Notification Deduplication Without Hiding Legitimate Events

Deduplicate browser and in-app notifications using event IDs, type, entity version, display windows, and durable acknowledgement across tabs, replay, and permission changes.

A capability stays maintainable only when the team can explain every state, retry, and piece of residual data—not merely show one successful run. Protocol state may be safely re-applied while its notification should appear once. Multiple tabs also need one elected presenter for the same event.

Frontend architecture is about state ownership, repeatable events, invalidation of stale async work, and cleanup after unmount—not the shape of the source directory.

Questions the design must answer

Turn the important choices into durable contracts: validate inputs, assign state ownership, define cleanup, and specify fallback for older peers. Later optimization must not change those semantics.

  • Build the key from event ID, type, and entity version rather than text or sender.
  • Coordinate tabs through BroadcastChannel or shared storage, preferring the active foreground tab.
  • Represent legitimate reminders with a new version or cooldown rather than permanent suppression.

Notification dedupe protects attention. Stable identity, tab coordination, and explicit reminder rules outperform timing debounce.

Edge cases are part of the feature

Prioritize faults that silently preserve false facts: the interface looks recovered while a queue, permission, or counter has diverged. The defect often appears only on the next action.

  • Two distinct files named report.pdf collide under text-based dedupe.
  • System notification and in-app toast use separate stores and both alert for one event.
  • Dedupe records never expire, consuming storage and suppressing future reused IDs.

Prove that it works with evidence

Observe both endpoints, persisted records, and operational signals during verification. One button state or one successful response cannot prove the complete loop.

  1. With three tabs and one foreground, exactly the correct tab presents one notification.
  2. Replay same ID, newer version, and same text with another ID to verify suppression boundaries.
  3. Change notification permission allowed-denied-allowed while preserving one coherent count.

The result must be correct, recoverable, and explainable. If any part depends on refreshing the page or an engineer guessing, the protocol loop remains incomplete.

Put the guide to work

Open uCopy and connect two devices securely from the browser.

Start for free