Github Stars:
Last Commit: 
Created: 
Overview:
This project is designed to showcase the new Web Push notification capabilities on iOS, which were officially released with iOS 16.5 in May 2023. The project website, webpushtest.com, allows users to experience and test Web Push notifications on iOS, desktop, and Android. It also provides instructional information and device-specific error messages for a seamless user experience. The project offers code for implementing push notification support in web and progressive web apps (PWA), requiring an API key from MagicBell. MagicBell offers a free tier for easy entry into using their services and also provides a real-time in-app notification inbox that can be integrated into apps quickly.
Features:
- Support for Web Push notifications on iOS, desktop, and Android
- Instructional information and device-specific error messages for a smooth user experience
- Code for implementing push notification support in web and PWA apps
- Free tier with MagicBell API key for easy integration
- Real-time in-app notification inbox integration
Installation:
To run the project locally, follow these steps:
- Install dependencies by running the command:
npm install
Obtain your NEXT_PUBLIC_MAGICBELL_API_KEY and MAGICBELL_API_SECRET from the MagicBell dashboard of your project and set them as environment variables in a .env file at the root of the project.
Start the development server by running the command:
npm run dev
Open http://localhost:3000 in your browser to see the result.
To observe iOS push notifications from your local development environment, you will need to expose your local server to the internet. It is recommended to use ngrok for this purpose.
After exposing your local server, visit the resulting public URL on your device and install the app as a PWA by using the “Add to Home Screen” option in the Safari share menu.
Summary:
This project showcases the beta support for Web Push notifications on iOS, officially released with iOS 16.5 in May 2023. It allows users to experience and test Web Push notifications on iOS, desktop, and Android. The project provides instructional information, device-specific error messages, and code for implementing push notification support in web and PWA apps. MagicBell offers a free tier for quick integration, along with a real-time in-app notification inbox feature.
