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 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 !!


SIVA SANKAR, Working as a Software Engineer, Blogging is my hobby. I completed my Bachelors of Engineering (Computer Science Engineering) in Chennai, India. and my Master of Engineering (Embedded System Technologies) in Tamilnadu, India.

21 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?

  2. Hi Siva,
    Thank you very much for this article. i have done all process as described, register is also succeed from both server + client side.
    But on server side when i send msg with ” Subscription to Send To ” (value got from client side) getting an error:
    http//**.com/api/send not found ( send-message.js:49 )

    please help me, how can i solve this..

      1. ok thanks,
        please please guide me, how should i keep files on server or
        anything that can help solve this problem…. &
        how can be send using PHP curl ?

  3. Very happy with your post…But can i know how can i integrate if my web server is running on PHP..how can i able to broadcast messages from php backend ?????

      1. It’s ok… But it’s unfair to run an extra node instance alongside Php.. I’m having a hard time finding a decent getaway with php implementation. Anyway thanks for the reply..

  4. hi shiva
    i am trying to run your source code but i am unable to send notification showing this error .
    pls help

    {“code”: 401, “errno”: 109, “error”: “Unauthorized”, “more_info”: “http://autopush.readthedocs.io/en/latest/http.html#error-codes”, “message”: “Request did not validate missing authorization header”}

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.