Push notifications allows your application to notify user with new messages/events even when the user is not actively using your application/website. It provides a simple and effective way to re-engage with your users. Push notification for web applications is a customized message or alert delivered by a centralized server. It allow your users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, engaging content.
We are going to discuss about few topics listed below that explains how the push notification for web applications works using Firebase.
- Service Workers
- Web push (Node.JS Package)
You can get the list of running service workers on your chrome browser by hitting the url chrome://inspect/#service-workers. Similarly get the list of all registered service workers by hitting chrome://serviceworker-internals/.
Firebase is a mobile and web application platform with tools and infrastructure designed to help developers build high-quality apps. Its has a various tools like Realtime Database, Hosting, Cloud Messaging, etc ..,
Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages
Web push (Node.JS Package)
Web push requires that push messages triggered from a backend be done via the Web Push Protocol and if you want to send data with your push message, you must also encrypt that data according to the Message Encryption for Web Push. Web push module makes it easy to send messages and will also handle legacy support for browsers relying on GCM/FCM for message sending / delivery.
Push Notification For Web Applications :
Here are the steps to run sample code on your computer. Before proceeding into steps make sure you have installed Node.Js and chrome browser on your computer.
- Download/Clone the code from GitHub
- Install packages dependencies by using the command
npm installon your command prompt
- After Installing dependencies start the application server by using the command
- Now, Server application turned at port
http://localhost:3001/and client application at port
- Now, Run your server-side application to get server public key and add to your client application files (
- Run your client-side application to get the endpoint(JSON). Just copy and paste on your server-side applications and send message.
Some Links for more Reference to Push Notification :
- Service Workers
- Service Worker API
- Adding Push Notifications to a Web App
- Push Notifications on the Open Web
Please leave your valuable comments/suggestions/feedback/questions on below comment box if any.
Thank You !!