Web Push Notifications Server

Simple server which provides Web Push Notifications service to frontend applications.

Note:

• Check the project's design & development doc to know more on how I designed & developed the project.
• Also check the project's changelog to know more on how the project is progressing.

What’s In This Document

• Introduction
• Getting Started
• Frontend Codebase with Demos
• Browser Support
• Support the Project
• License

Introduction

Want to add the Push Notifications feature in your frontend project and that too without managing your servers? If it's yes, then keep reading this doc.

This project started with the idea of developing a fully managed service that handles push notification servers for web applications. So that any frontend app can use this feature without implementing & managing their servers for web push notifications.

Check out the Getting Started section right now to set the Push Notifications feature.

Getting Started

• Step 1: Registration

  • Register the Origin on which your website is running & you want to enable push notification service. (for detailed info on registering owner of an origin checkout API documentation)
  • After successful registration, store the owner ID & secret safely (consider this as your password & don't share it with anyone)

• Step 2: Setup frontend web apps too which your visitors will subscribe

  Note:

  • Explanation is based on frontend made with React.js, but you can easily replicate for other frameworks.
  • Check out the working frontend demo here & codebase here.

  • Add this push-notification-SW.js file to your public folder.
  • Add these App.js & utils.js codes to your codebase.
  • Also, add these variables to your .env file:

    REACT_APP_PUBLIC_VAPID_KEY=BGBUgRmq_y5sm7NJdEJNQiho94QUv8VeUEJ57CXehZ7ybxKNFWAjHx2p_WgUz_sQB7XBGcEOLv2iJ5V3lMCWUtg
    REACT_APP_SERVER_URL=https://web-push-notifications-server.vercel.app/api
    REACT_APP_OWNER_ID=<your-owner-id-here>
    

    (Use the above REACT_APP_PUBLIC_VAPID_KEY only)

• Step 3: Sending push notifications to web visitors for your application

  • Send a post request to /owner/sendNotification/<your-owner-id-here> endpoint along with the data (for detailed info on sending push notifications checkout API documentation)

Frontend Codebase with Demos

List of example codebase with demo showing how to use web push notification feature

• React.js codebase - Demo

Browser Support

Browser	Web Push Notifications (WPN) Server Support	VAPID Support
Chrome	✓ (v50 +)	✓
Edge	✓ (v17 +)	✓
Firefox	✓ (v44 +)	✓
Safari & Safari on iOS	✗	✗
Opera *	✗	✗
Samsung Internet Browser *	✗	✗
Brave *	✗	✗

* Browser is using GCM/FCM based push notification service which requires a WPN server to set up Firebase cloud messaging service, so this will be only done if there are enough users requesting this feature from the WPN server.

Support the Project

If you are using this project and happy with it or just want to encourage me to continue creating stuff, there are few ways you can do

• Starring and sharing the project
• Become a maintainer

If you would like to see a feature implemented, don't hesitate to add it to the issues list.

Contributions are welcome! ✌

License

Licensed under the MIT License.