Create TeamAdd Your APIDocs
Log In
Sign Up

Web Push Notifications Server

FREE
By Dhyey Thumar | Updated a month ago | Communication
Popularity

6.9 / 10

Latency

1,168ms

Service Level

100%

Health Check

N/A

Back to All Tutorials (2)

How to setup frontend web app too which your visitors will subscribe?

Note:

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

  • 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 & REACT_APP_SERVER_URL values only)

Frontend Codebase with Demos