Real-Time chat application using React, Websockets with Notification enabled

By StartxLabs
Date 03-02-18
Real-Time chat application using React, Websockets with Notification enabled
" None"

The Notification Interface

The Notification interface of the Notifications API is used to configure and display desktop notifications to the user. This Notification API provides web pages with the feature to control the display of system notifications to the user outside of the Top-level browsing context viewport event if the user switched to another tab or application.

Notification() - Constructor creates a new instance of the Notification object.


There is single Static Property available only on the Notification object:

     1. Notification.permission

This contains a string representing the current permission to display notifications. It is a read-only property. Possible values are:

  • denied - If the user refuses to have notifications displayed.

  • granted - If the user accepts having notifications displayed.

  • default - If the user choice is unknown and therefore the browser will act as if the value were denied.

These are some of the properties available only in the instance of the Notification object:

 1.  Notification.actions

      The actions array of the notification as specified in the options parameter of the constructor.

 2.  Notification.badge

      The URL of the image used to represent the notification when there is not enough space to display the notification itself.

 3.  Notification.body

      The body string of the notification as specified in the options parameter of the constructor.


      Returns a structured clone of the notification’s data.

 5.  Notification.icon

      The URL of the image used as an icon of the notification as specified in the options parameter of the constructor.

 6.  Notification.renotify

      Specifies whether the user should be notified after a new notification replaces an old one.

 7.  Notification.requireInteraction

      A Boolean indicating that a notification should remain active until the user clicks or dismisses it, rather than closing automatically.

 8.  Notification.silent

      Specifies whether the notification should be silent, i.e. no sounds or vibrations should be issued, regardless of the device settings.

 9.  Notification.title

      The title of the notification as specified in the first parameter of the constructor.

10. Notification.vibrate

      Specifies a vibration pattern for devices with vibration hardware to emit.



These methods are available only on the Notification object:

     1. Notification.requestPermission() -

Used to request permission from the user to display notifications.

These properties are available only on an instance of the Notification object:

     2. Notification.close() -

Programmatically closes a notification.


Service Workers

These are more like proxy servers residing between web apps and the browser and the network (when available). They facilitate web apps to run part of code offline i.e. outside the browser context whenever needed for effective offline experiences. Service workers are event-driven and can intercept network requests to take appropriate action.

A service worker is registered against an origin and a path. These are the javascript files that can control the web page/site it is associated with. Major use cases of services workers include responding to network requests, modifying navigation, resource requests and caching resources.

 It has no DOM access and runs on a different thread to the main JavaScript. Therefore it doesn’t block any execution while javascript on the pages are executed one after the other. Being fully asynchronous API, other synchronous APIs such as XHR and localStorage cannot be used inside a service worker. For security reasons, it can only be run over HTTPS. Service Worker can only access the pages that reside in the same or subdirectories within that worker’s directory.

Service workers can also be used in association with the Notification System. Service worker makes it easy to run and control the notification events as soon as it sees any request/change on the pages.


Service Worker Registration:

A service worker is first registered using ServiceWorkerContainer.register() method on the page load. After its success, the worker gets downloaded to the client machine, as soon as its controlled page is accessed, then tries to Install and Activate in order to function on the web pages in the same or subdirectories of that worker’s directory.


Install and Activate:

If there exists no old service worker then after download, it attempts to install and activate. But in case, there is an existing service worker and the new one is downloaded it compares both the files Byte-Wise. For an even a Byte of change, if the downloaded file is found to be new it will attempt to install the new file and later activate it.

For an existing service worker, a new file is installed in the backend but is not yet activated. It gets into the waiting state and is called “worker in waiting”. It waits until there is no loaded page using the old service worker. When it finds out that there is no other page to be loaded, it gets activated. It is now called “active worker”.

Activation can be done sooner using ServiceWorkerGlobalScope.skipWaiting() method without waiting for the current pages to close.

Clients.claim() method can be used to start controlling the currently open pages without having to reload them by the new worker.




Firebase provides advanced features for building better cross-platform apps. Services provided by Firebase are:

    1. firebase.auth() : Authentication

    2. : Cloud Storage

    3. firebase.database() : Realtime Database

    4. firebase.firestore() : Cloud Firestore

    5. firebase.messaging() : Firebase Cloud Messaging


Firebase Cloud Messaging (FCM) is a cross-platform solution for sending and receiving messages. Both programmatically or via Console we can send notifications to the target devices with reliability.

With FCM, we can send 2 types of messages; Notification Message and Data Message.

Notifications also have an optional data payload

When in the background, the app receives the notification payload in the notification tray and the data payload is handled only when the notification is tapped/clicked.

When in the foreground, the app receives both notification and data payload in message object.


For Web Apps (JavaScript),

  1. Instantiate a messaging object.

  2. Request User Permission to receive the notifications.

  3. Access the Registration Token via getToken() and onTokenRefresh() methods

  4. Send a notification message from Server

Receive messages when the app is either in foreground or background using onMessage and setBackgroundMessageHandler events.

subscribe to startxlabs