{"id":23398900,"url":"https://github.com/david-randoll/push-notification-nextjs","last_synced_at":"2026-03-07T17:33:27.929Z","repository":{"id":258469522,"uuid":"868123316","full_name":"david-randoll/push-notification-nextjs","owner":"david-randoll","description":"A sample project demonstrating how to send push notifications from a Next.js web app to iOS and Android devices. ","archived":false,"fork":false,"pushed_at":"2024-11-13T23:25:23.000Z","size":7314,"stargazers_count":28,"open_issues_count":1,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T17:49:16.113Z","etag":null,"topics":["android","ios","next-pwa","nextjs","notification","notifications","push-api","push-notification","push-notifications","pwa","service-worker","web-push","web-push-notification"],"latest_commit_sha":null,"homepage":"https://push-notification.davidrandoll.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/david-randoll.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-05T14:38:33.000Z","updated_at":"2025-03-29T13:47:08.000Z","dependencies_parsed_at":"2025-04-12T13:16:16.133Z","dependency_job_id":null,"html_url":"https://github.com/david-randoll/push-notification-nextjs","commit_stats":null,"previous_names":["david-randoll/push-notification-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/david-randoll/push-notification-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-randoll%2Fpush-notification-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-randoll%2Fpush-notification-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-randoll%2Fpush-notification-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-randoll%2Fpush-notification-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/david-randoll","download_url":"https://codeload.github.com/david-randoll/push-notification-nextjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-randoll%2Fpush-notification-nextjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30223413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T17:00:40.062Z","status":"ssl_error","status_checked_at":"2026-03-07T17:00:39.026Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","next-pwa","nextjs","notification","notifications","push-api","push-notification","push-notifications","pwa","service-worker","web-push","web-push-notification"],"created_at":"2024-12-22T09:49:51.753Z","updated_at":"2026-03-07T17:33:27.889Z","avatar_url":"https://github.com/david-randoll.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A sample project for push notifications with Next.js. The app used web push notifications to send messages to users. The\nnotification should work on all devices and browsers.\n\n**Require IOS 16+ for Apple devices.**\n\n## Demo\n\nA live demo of the project can be found [here](https://push-notification.davidrandoll.com/)\n\n## Running Locally\n\nFirst, run the development server:\n\n```bash\nnpm install\n```\n\nRun the below command to generate the vapid keys. Once you have the keys, rename the `.env.example` file to `.env` and\ninsert the keys.\n\n```bash\nweb-push generate-vapid-keys --json\n```\n\nStart the development server:\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## How it works\n\nThe app uses the [web-push](https://www.npmjs.com/package/web-push) package to send push notifications. The app has a\nservice worker that listens for push events and displays the notification.\n\nUsing just this package is enough to send push notifications from most devices and browsers.\n\nHowever, on Apple devices, there are a few extra things we have to do.\n\n-   The app must be served over HTTPS with a valid SSL certificate.\n-   The app must be a PWA (Progressive Web App).\n\nYou can read more about it [here](https://developer.apple.com/documentation/usernotifications/sending-web-push-notifications-in-web-apps-and-browsers).\n\n## Configuration\n\nInstall the below packages.\n\n```bash\nnpm install web-push next-pwa\n```\n\nSkip this step if you are using typescript.\n\n```bash\nnpm install @types/web-push --save-dev\n```\n\n### Setting up the notification\n\nCopy the [notification-sw.js](https://github.com/david-randoll/push-notification-nextjs/blob/main/public/notification-sw.js) file into the `public` folder. This is a service worker that listens for push events and displays the notification.\n\nCopy the files under the [notifications](https://github.com/david-randoll/push-notification-nextjs/tree/main/src/notifications) folder and paste them into your src folder. In my case I pasted them in the\n`src/notifications` folder. The `useNotification` hook will be used in the app to subscribe a user and store the\nsubscription in state. This subscription can be stored in a database and used to send notifications per user.\n\nTake a look at the `page.tsx` file to see how the `useNotification` hook is used. The `page.tsx` calls an endpoint that is found under `src/app/api/web-push/send/route.ts`. This will send the notification to the user.\n\nWith this should be able to send notifications now. For Apple devices, you will need to configure the app as a PWA in the next step.\n\n### Configuring as a PWA\n\nThe [next-pwa](https://www.npmjs.com/package/next-pwa) package will generate a `sw-pwa.js` and a `workbox-*.js` file in\nthe public folder.\n\nI am going to use [pwabuilder](https://www.pwabuilder.com/imageGenerator) to generate the icons for the app. This will generate the different sizes of the icon that are needed for different devices. After going to the site, download the zip file and place the contents into the public folder. You should get 3 folders: android, ios, and windows. Also, an `icons.json` file which we will use for our manifest file.\n\nMove the `icons.json` file to the `public` folder and rename it to `manifest.json`.\n\n```json\n{\n    \"name\": \"Push Notification Sample\",\n    \"short_name\": \"Push Notification Sample\",\n    \"description\": \"A sample project for push notifications with Next.js\",\n    \"theme_color\": \"#FFFFFF\",\n    \"background_color\": \"#FFFFFF\",\n    \"start_url\": \"/\",\n    \"display\": \"standalone\",\n    \"orientation\": \"portrait\",\n    \"icons\": // the icons will be here\n}\n```\n\nadd the `manifest.json` file to the `layout.tsx` file.\n\n```tsx\nexport default function RootLayout({\n    children,\n}: Readonly\u003c{\n    children: React.ReactNode;\n}\u003e) {\n    return (\n        \u003chtml lang=\"en\"\u003e\n            \u003chead\u003e\n                \u003clink rel=\"manifest\" href=\"/manifest.json\" /\u003e\n            \u003c/head\u003e\n            \u003cbody className={`${inter.variable} ${ibmPlexSerif.variable}`}\u003e\n                \u003cNotificationProvider\u003e{children}\u003c/NotificationProvider\u003e\n            \u003c/body\u003e\n        \u003c/html\u003e\n    );\n}\n```\n\nmodify the `next.config.js` file to include the `next-pwa` configuration.\n\n```javascript\n/** @type {import('next').NextConfig} */\n\nconst withPWA = require(\"next-pwa\")({\n    dest: \"public\",\n    sw: \"sw-pwa.js\",\n});\n\nmodule.exports = withPWA({\n    output: \"standalone\",\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-randoll%2Fpush-notification-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavid-randoll%2Fpush-notification-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-randoll%2Fpush-notification-nextjs/lists"}