" Real-Time chat application using React, Websockets with Notification enabled"
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:
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:
The actions array of the notification as specified in the options parameter of the constructor.
The URL of the image used to represent the notification when there is not enough space to display the notification itself.
The body string of the notification as specified in the options parameter of the constructor.
Returns a structured clone of the notification’s data.
The URL of the image used as an icon of the notification as specified in the options parameter of the constructor.
Specifies whether the user should be notified after a new notification replaces an old one.
A Boolean indicating that a notification should remain active until the user clicks or dismisses it, rather than closing automatically.
Specifies whether the notification should be silent, i.e. no sounds or vibrations should be issued, regardless of the device settings.
The title of the notification as specified in the first parameter of the constructor.
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.
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.
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. firebase.storage() : 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.
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.