Task: Configure Web Push notifications for help requests

Configure Web Push notifications for help requests

Add standard Web Push with VAPID so that users with the "I am online" status receive notifications about new requests even when the tab is closed.

Goal

Ensure the delivery of notifications about new help requests to users who have enabled the "I am online" status, even if the website tab is inactive or unloaded by the browser.

Use the standard Web Push API + Service Worker + VAPID, without tying business logic to Firebase or a separate APNs integration.

Architecture

Client:

  • request notification permission;
  • Service Worker registration;
  • PushManager.subscribe() with a public VAPID key;
  • sending PushSubscription to the backend;
  • handling the push event in the Service Worker;
  • displaying a system notification;
  • handling notification clicks and opening the required screen/request.

Backend:

  • generation and storage of the VAPID key pair;
  • storage of user push subscriptions;
  • sending Web Push to the opaque endpoint provided by the browser;
  • payload encryption with subscription keys;
  • VAPID signing of requests;
  • deletion of expired subscriptions upon 404/410 responses;
  • logging of delivery and errors.

Presence Integration

Push notifications should only be sent to users who have the "I am online" status active.

The status must have a TTL so that the user does not receive notifications long after they have actually ceased to be available.

Realtime for an active tab and Web Push for a background/closed tab should use the same help_requested event, but different delivery channels.

Scenario

  1. The user enables "I am online".
  2. If push permission has not been granted yet, they are prompted to enable notifications.
  3. The browser creates a subscription and passes it to the backend.
  4. A new help request appears.
  5. The active tab receives the event via the realtime channel.
  6. The inactive/unloaded tab receives the event via Web Push.
  7. Clicking the notification opens the specific help request.

iOS Specifics

Check and account for current Web Push limitations on iPhone/iPad:

  • Web Push works for web apps added to the Home Screen;
  • permission must be requested after an explicit user action;
  • delivery goes through Apple's infrastructure, but a separate Apple Developer account and manual APNs integration are not required for standard Web Push.

What to Test

  • Chrome desktop;
  • Firefox desktop;
  • Safari macOS;
  • Android Chrome;
  • iPhone/iPad Home Screen web app;
  • re-subscription after resetting permissions;
  • Service Worker updates;
  • multiple devices for a single user;
  • deletion of invalid subscriptions;
  • navigating from a notification to an already open tab and a new tab.

Principle

All notification, subscription, queue, and routing logic remains on your own infrastructure. External browser push providers are only used as a transport for standard Web Push.