Web Push in the Next.js App Router: Field Notes on Service Workers, VAPID, and the iOS Rule That Silently Blocks Everything
Web Push is a browser API that delivers a server-sent notification to a device while your site is closed, and in a Next.js App Router project it needs exactly three parts: a service worker served from the origin root, a VAPID key pair, and a Node.js-runtime route handler that sends. On iOS Safari it needs a fourth thing nobody documents loudly enough — the user must install the site to…
Web Push is a browser API that delivers server-sent notifications to devices while a site is closed, and in a Next.js App Router project, it requires three main components: a service worker served from the origin root, a VAPID key pair, and a Node.js-runtime route handler that sends the push notifications. The service worker must be located at /sw.js, as its scope cannot be broader than the path it is served from.
VAPID, or Voluntary Application Server Identification, is a public/private key pair that authenticates the server to the browser's push service and should be generated once using npx web-push generate-vapid-keys. iOS Safari 16.4 and later support Web Push, but only after the user installs the site to the Home Screen and the app runs in display: standalone mode.
The three components required for Web Push in a Next.js app are a registered service worker, a PushSubscription obtained from registration.pushManager.subscribe(), and a server that signs its requests with VAPID keys.
Brief written by urgent.news from Dev.to's own syndicated text. Machine-written — may contain errors; check the original before relying on it.
