AddThisFeature

Browser Push Notifications

Reach users with timely updates when the app is not open.

involved Engagement

What it adds

Web push subscriptions per device, with permission handled carefully and dead subscriptions cleaned up.

What your agent is told to do

5
  1. 1

    Register a service worker and store each push subscription against the user, with the device it came from and when it was last used.

  2. 2

    Ask for permission only after a user action that implies they want it — enabling push in settings, or opting in on a record. Never on page load.

  3. 3

    Show your own explanation before triggering the browser prompt, and let the user decline yours without burning the browser permission, which they cannot easily undo.

  4. 4

    Deep-link each notification to the relevant record and re-check authorization when it opens; the notification may be hours old.

  5. 5

    Do NOT put private content in the notification body. It renders on a locked screen anyone can see.

Edge cases it handles

6
  • Denied, dismissed, revoked, and unsupported are four different states and need four different UI outcomes.
  • A subscription rejected by the push provider is dead — delete it rather than retrying it forever.
  • A user with three devices should get one notification per device, and opening it on one should not leave it unread on the others.
  • If the app is already open and focused on the relevant record, suppress the push and update in place.
  • Push preferences must live on the existing notification preference model as another channel, not as an isolated toggle.
  • Signing out on a device must remove that device's subscription, or the next user of that machine receives someone else's notifications.

Definition of done

8
  • Permission is requested only after an explicit user action, behind an in-app explanation.
  • Subscriptions are stored per device and removed on sign-out.
  • Denied, revoked, and unsupported states each have their own handling.
  • Provider-rejected subscriptions are deleted automatically.
  • Notifications deep-link and re-check authorization on open.
  • Push is a channel on the existing preference model.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.