Service Worker & Frontend Push Integration

Canadian Elite Volleyball Academy — Development Update • April 21, 2026

Service Worker & Frontend Push Integration

What & Why

Update the existing PWA service worker to handle incoming push notifications and connect the frontend to the push subscription API. Users need a way to grant permission, subscribe their browser, and manage their push preferences through the notification settings page. This makes the push infrastructure (Task #65) usable from the browser.

Done looks like

• The service worker shows native browser notifications when a push event arrives
• Clicking a notification opens the app and navigates to the relevant page (e.g., /messages)
• Users can enable/disable push notifications from the Notification Settings page
• Per-category toggles let users choose which types of push notifications they receive
• A one-time non-intrusive prompt appears after login encouraging users to enable push
• The prompt respects dismissal (doesn't show again) stored in localStorage

Out of scope

• Backend push infrastructure (Task #65 — must be complete first)
• Wiring push into specific event triggers (Task #67)

Relevant files

- - - - - -

Canadian Elite Volleyball Academy
elitevolleyball.training