{
  "id": 1430574,
  "title": "Web Push in the Next.js App Router: Field Notes on Service Workers, VAPID, and the iOS Rule That Silently Blocks Everything",
  "url": "https://urgent.news/2026/08/17/web-push-in-the-next-js-app-router-field-notes-on-service-workers",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-17T06:00:11.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ahmed_mahmoud360/web-push-in-the-nextjs-app-router-field-notes-on-service-workers-vapid-and-the-ios-rule-that-1oj2"
  },
  "original_language": "en",
  "account": null,
  "summary": "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.",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}