How to Implement Web Push in Next.js App Router, Including the iOS Catch

A developer has documented the practical steps for integrating Web Push notifications into a Next.js App Router project, outlining three core requirements: a service worker at the origin root, a VAPID key pair for server authentication, and a Node.js runtime route handler. A critical but poorly documented iOS limitation means Web Push only works on Safari after users install the site to their Home Screen, as the Push API is entirely unavailable in standard iOS browser tabs. The service worker must be placed in the public/sw.js directory so it is served at the correct scope, since a worker served from any subdirectory cannot control pages outside that path. Developers are also advised to use the Node.js runtime rather than the Edge runtime for sending pushes, as the web-push package relies on Node's crypto module for payload encryption. The writeup also covers handling dead subscriptions, where HTTP 404 or 410 responses from a push service indicate a permanently expired endpoint that should be deleted immediately.