Push Notification For Web Applications Using Firebase

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
  • Firebase
  • Web push (Node.JS Package)

Service Workers

Service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. It allow you to include features like push notifications and background sync. It’s a JavaScript Worker, so it can’t access the DOM directly. Instead, a service worker can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM if needed.

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

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 install on your command prompt
  • After Installing dependencies start the application server by using the command node app
  • Now, Server application turned at port http://localhost:3001/ and client application at port http://localhost:3002/
  • Now, Run your server-side application to get server public key and add to your client application files (sw.js & main.js)
  • 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 :

Please leave your valuable comments/suggestions/feedback/questions on below comment box if any.

Thank You !!

3 thoughts on “Push Notification For Web Applications Using Firebase

  1. Hi Siva,

    Thank you for sharing…
    I have a doubt,
    # In android smart phones, is it like facebook web push notification implementation?

Leave a Reply

Your email address will not be published. Required fields are marked *