{"id":23113711,"url":"https://github.com/magicbell/webpush-ios-template","last_synced_at":"2025-09-04T13:33:21.731Z","repository":{"id":172776100,"uuid":"649733280","full_name":"magicbell/webpush-ios-template","owner":"magicbell","description":"Web push notifications demo and starter template with support for iOS Safari PWA notifications.","archived":false,"fork":false,"pushed_at":"2024-06-27T14:32:41.000Z","size":25577,"stargazers_count":96,"open_issues_count":0,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-29T11:34:13.924Z","etag":null,"topics":["ios-push-notification","nextjs","push-notifications","safari","vercel","webpush","webpush-notifications"],"latest_commit_sha":null,"homepage":"https://webpushtest.com","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/magicbell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-06-05T14:12:11.000Z","updated_at":"2024-12-18T10:57:40.000Z","dependencies_parsed_at":"2024-03-27T09:41:53.847Z","dependency_job_id":"8f79b8f7-0111-44f8-8d78-426e07287261","html_url":"https://github.com/magicbell/webpush-ios-template","commit_stats":null,"previous_names":["magicbell-io/webpush-test","magicbell-io/webpush-ios-template","magicbell/webpush-ios-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fwebpush-ios-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fwebpush-ios-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fwebpush-ios-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fwebpush-ios-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magicbell","download_url":"https://codeload.github.com/magicbell/webpush-ios-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231965480,"owners_count":18453091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["ios-push-notification","nextjs","push-notifications","safari","vercel","webpush","webpush-notifications"],"created_at":"2024-12-17T03:10:17.979Z","updated_at":"2024-12-31T09:10:11.915Z","avatar_url":"https://github.com/magicbell.png","language":"TypeScript","readme":"# About this project\n\nApple released [beta](https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados) support for Web Push notifications on iOS in February 2023, and made it official with the release of iOS 16.5 in [May 2023](https://www.macrumors.com/2023/05/09/apple-confirms-ios-16-5-release-date/).\n\nThis project, hosted at https://webpushtest.com, showcases these new capabilities. In addition to iOS, it can also send Web Push notifications on desktop and Android (although this is somewhat old news).\n\nIt is targeted at the end user, for whom installing a PWA and receiving a Web Push notification will likely be a new experience. As such, we have tried to include instructional information and device-specific error messages where relevant. Take a look at this Youtube short\n\n[![Demo of WebPushTest.com on Youtube](https://img.youtube.com/vi/aIlGLE_adzc/maxresdefault.jpg)](https://www.youtube.com/watch?v=aIlGLE_adzc)\n\nYou can use the code for providing push notification support in your web/PWA apps, but you will need an API key from [MagicBell](https://www.magicbell.com). We offer a generous free tier so you can get started quickly. Apart from web-push, we offer a real-time in-app notification inbox you can add to your app in minutes.\n\nRelevant links:\n\n- [iOS now supports push notifications (and why you should care)](https://www.magicbell.com/blog/ios-now-supports-web-push-notifications-and-why-you-should-care)\n- [Twitter thread](https://twitter.com/Matt0xley/status/1668912123702030336)\n- If you'd like help, please start a [GitHub Discussion|(https://github.com/orgs/magicbell/discussions).\n\n## Running locally\n\nFirst, install dependencies:\n\n```bash\nnpm install\n```\n\nThen, assuming you have a MagicBell account and have created a new project, obtain the NEXT_PUBLIC_MAGICBELL_API_KEY and MAGICBELL_API_SECRET from the [MagicBell](https://www.magicbell.com/) dashboard and set them as environment variables in a `.env` file at the root of this project:\n\n```bash\nNEXT_PUBLIC_MAGICBELL_API_KEY=...\nMAGICBELL_API_SECRET=...\n```\n\nThen, start 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\nTo observe iOS push notifications from your local development environment, you will need to expose your local server to the internet. We recommend using [ngrok](https://ngrok.com/):\n\n```bash\nngrok http 3000\n```\n\nAfter visiting the resulting public url on your device, be sure to also install the app as a PWA, using the \"Add to Home Screen\" option in the Safari share menu.\n\n## Important files\n\nThese will be the most relevant files to look at if you want to understand how this project works:\n\n- https://github.com/magicbell/webpush-test/blob/main/src/components/subscriber.tsx\n- https://github.com/magicbell/webpush-test/blob/main/src/services/subscriptionManager.ts\n- https://github.com/magicbell/webpush-test/blob/main/public/manifest.json\n- https://github.com/magicbell/webpush-test/blob/main/public/sw.js\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicbell%2Fwebpush-ios-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagicbell%2Fwebpush-ios-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicbell%2Fwebpush-ios-template/lists"}