BLOG
BLOG
  • Design
  • Data
  • Discernment

We believe in AI and every day we innovate to make it better than yesterday. We believe in helping others to benefit from the wonders of AI and also in extending a hand to guide them to step their journey to adapt with future.

Know more

Our solutions in action for customers

DOWNLOAD

Featured Post

MENU

  • Visit Accubits Website.
  • Artificial Intelligence
  • Blockchain
  • Cloud Computing
  • Entertainment
  • Fintech

Building messenger apps like Whatsapp and Telegram with PWA

  • mm
    by Rahul A R on Wed Oct 21

Can we use PWA for whatsapp or PWA for telegram? Is it feasible to use  progressive web apps or PWAs for building messenger applications? Let’s explore more in this article.

Messenger apps like Whatsapp and Telegram are one of the most commonly used communication tools in today’s digital age. Although these apps started with instant messaging, growing digitization and consumer demand for accessing services through a chat interface, many of these messenger apps have developed into broader platforms that include chatbots, payments and conversational commerce (e-commerce via chat).

Most of the messenger apps available today are native apps that users have to install on their device. However, this is not a feasible option for businesses that want to promote chat interfaces for providing their services. For them, their customers would prefer to visit the mobile site through their browser without having to install the app. Progressive Web Apps bridge the gap between these two scenarios by creating an app-like experience in the browser. 

Progressive web applications are essentially optimized web platforms that can be downloaded directly from a website and opened in a browser. If you want to learn more about them, you can read our article on revolutionizing user experience with PWAs. In this article, we will take a look into the possibilities in building a PWA app for messenger apps like Whatsapp and Telegram. 

Should you choose PWA for your messenger apps ?

The answer depends on your business requirements and customer profile. If the services provided by the messenger app are long term and high volume, it is better to go for a native app development or a hybrid app for your messenger app. Rather, if the services provided are short term, that is, the customer would not install an app just for the service provided, PWA is the right choice for you.

Comparison Between PWA Vs Native App

FeaturesPWANATIVE APP
Function OfflineYesYes
Mobile Specific NavigationYesYes
Push Notifications YesYes
Home Screen AccessYesYes
No Download RequiredYesNo
Bypass the MarketplaceYesNo
Linkable and ShareableYesNo
Index by GoogleYesNo
Low Data RequiredYesNo
Requires No UpdateYesNo

Following are the benefits offered by a PWA app:

  • Cost-efficiency: PWAs can help your business save up on a lot of money. Native apps require a separate development process for each platform. However, you will only need to develop a PWA once and it will be suitable for all platforms.
  • Easier deployment: Since PWAs are found and downloaded directly from a website, there is no need to be bothered with submitting your app to the store, following all the technical requirements and community guidelines of the OS, and waiting for confirmation.
  • Better visibility: Google prioritizes progressive web apps over traditional websites or regular mobile applications. PWAs can be SEO optimized to gain better visibility among users.
  • Faster loading speed: When first downloading a PWA, the user does not download all the content of the app as in the case of mobile applications. This means that the loading speeds are much faster when compared to that of a native application.
  • Vendor-client neutrality: PWAs are vendor-and-client neutral. Unlike Messenger apps, which only work within Facebook Messenger, PWAs work in any browser.
  • Connectivity-independent: PWAs can work seamlessly with less or no connectivity.

Need help with PWA development?

Reach out to us today and get started!

View Services

How to build a messenger PWA? 

  • Serve over HTTPS

In order to build a messenger PWA, HTTPS is crucial for using service workers and allowing home screen installation. You can purchase an SSL certificate from your domain registrar at little expense and then configure it through your hosting service.

  • Create an application shell

When a user visits a PWA, the first thing that will load is the application shell. It is important to ensure that its presence in your index HTML document, with inline CSS. This will enable it to appear fast with very little buffering. 

The following example is taken from a React.js application. The user is given an outline of the app and a loading indicator in the index.html. Then, once the JavaScript loads and React boots up, the full application is rendered within the shell.

<!--index.html-->
<body>
<div id="root">
  <div id="container">
  <div class="inner-container">
  <div id="header">
  <img src="/assets/icon.png" alt="logo" />
  <h1>Chat</h1>
  </div>
  <div id="loading-container">
  <img src="/assets/icon.png" alt="logo" id="loader"/>
  </div>
  </div>
  </div>
  </div>
</body>
// index.js
ReactDOM.render(
<App />, 
document.getElementById('root')
);
  • Register a service worker

If you want to provide extra features like push notifications in your PWA, then service workers form a key component. First, you will need to make sure that the user’s browser will support service workers. If it does, then you can register the service worker file service‑worker.js. 

Below, you will see how to tap into the three key service worker life cycle events. These are ‘install’, for the user’s first visit; ‘activate’, right before registration completes; and ‘fetch’, when the application makes a network request. 

<script>
  if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
  navigator.serviceWorker.register('service-worker.js').then(function(registration) {
  // Registration was successful
  console.log('Registered!');
  }, function(err) {
  // registration failed :(
  console.log('ServiceWorker registration failed: ', err);
  }).catch(function(err) {
  console.log(err);
  });
  });
  } else {
  console.log('service worker is not supported');
  }
  </script>
// service-worker.js
self.addEventListener('install', function() {
  console.log('Install!');
});
self.addEventListener("activate", event => {
  console.log('Activate!');
});
self.addEventListener('fetch', function(event) {
  console.log('Fetch!', event.request);
});
  • Add push notifications

As mentioned above, service workers are required, if you want to access certain features of PWAs. They allow your users to receive push notifications via the web Push API. To access it, you can tap into self.registration.pushManager from within your service worker file. 

The code below shows how to register for push notifications via the Push API.

navigator.serviceWorker.ready.then(function(registration) {
  if (!registration.pushManager) {
    alert('No push notifications support.');
    return false;
  }
  //To subscribe `push notification` from push manager
  registration.pushManager.subscribe({
  userVisibleOnly: true //Always show notification when received
  })
  .then(function (subscription) {
  console.log('Subscribed.');
  })
  .catch(function (error) {
  console.log('Subscription error: ', error);
  });
})
  • Add a web app manifest advertisement

In order to make your application installable, you need to include a manifest.json in the application’s root directory. A proper manifest.json should include a full spectrum of icon sizes for various devices. The code below is a preview of some of the properties your manifest can include:

{
  "short_name": "Chat",
  "name": "Chat",
  "icons": [
  {
  "src":"/assets/icon.png",
  "sizes": "192x192",
  "type": "image/png"
  }
  ],
  "start_url": "/?utm_source=homescreen",
  "background_color": "#e05a47",
  "theme_color": "#e05a47",
  "display": "standalone"
}
  • Configure the install prompt

When a user visits a PWA with a service worker, Chrome will immediately display a prompt to install it to their device’s home screen, given the following: the user must visit the site twice, with five minutes between visits. 

However, sometimes you may want to show the install prompt in different situations, such as after the user takes a particular useful action. To do so, we intercept the beforeinstallprompt event and save it for later, then deploy the prompt when we see fit.

window.addEventListener('beforeinstallprompt', e => {
  console.log('beforeinstallprompt Event fired');
  e.preventDefault();
  // Stash the event so it can be triggered later.
  this.deferredPrompt = e;
  return false;
  });
// When you want to trigger prompt:
this.deferredPrompt.prompt();
  this.deferredPrompt.userChoice.then(choice => {
  console.log(choice);
  });
this.deferredPrompt = null;
  • Analyse your app’s performance

Your PWA must perform seamlessly for users on all network conditions. This is the definition of progressive enhancement – provide a great experience for everyone, regardless of device modernity or network conditions. In order to analyze an app’s performance, the RAIL system is often used. RAIL is what Google calls a ‘user-centric performance model’ – a set of guidelines for measuring our app’s performance. 

The acronym stands for Response (how long it takes for your app to respond to user actions), Animation (keeping animation speed at 60fps), Idle (using time when your app isn’t doing anything else to load and cache additional assets) and Load (loading your app in one second or less).

  • Audit your app with Lighthouse

Google has a very popular tool that can be used for PWA development. Lighthouse is a part of the Chrome DevTools, under the ‘Audits’ tab. It can run your application under different conditions and measure its response and success according to PWA guidelines.

Looking to build PWA messenger apps

Get in touch our team

Contact Us

Related Posts

Drive into stories worth discussing

  • mm
    Should you Re-write your App for the Newest Coding Language?
    Nick Kumaran
  • mm
    The Secret Sauce of Building Addictive Mobile Apps
    Nick Kumaran
  • mm
    Flutter Tutorial : How to Navigate between Widgets and Screens
    Nithya Rajan
  • mm
    Revolutionizing user experience with Progressive Web Applications
    Arun Jayakumar

ASK AUTHOR

mm
Rahul A R

Rahul A R is a technologist and full-stack developer who specializes in Blockchain technologies and Cryptocurrencies. Though he’s ... Read more

Ask A Question
Error
Cancel
Send

Categories

View articles by categories

  • General

Subscribe now to get our latest posts

  • facebook
  • linkedin
  • twitter
  • youtube
All Rights Reserved. Accubits Technologies Inc