Next.js PWA Native Notifications

I have a production [login to view URL] application that already runs as a Progressive Web App. Now I need fully functional push and in-app notifications built with native-style PWA code—not Firebase. The goal is to surface user-activity updates and critical system alerts whether the app is open or running in the background. I expect you to wire up service workers, the Web Push API, and any required VAPID keys so that the browser can receive, display, and route notifications seamlessly across desktop and mobile. What you hand over should include: • Updated [login to view URL] pages and service-worker scripts that register, subscribe, and display notifications. • A simple server-side endpoint (Node/Express or API route) that can be called to trigger a push, proving end-to-end delivery. • In-app toast or badge components that render the same message when the page is in focus. • Clear setup, build, and testing instructions so I can reproduce the flow locally and in production. Acceptance is straightforward: subscribe, trigger, and see the notification arrive in the browser notification tray and echoed in-app. Let’s keep the stack pure [login to view URL] + standard PWA tooling—no Firebase or other third-party push providers.

Project ID: 40174637