BLOG
BLOG
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.
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.
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.
| Features | PWA | NATIVE APP |
|---|---|---|
| Function Offline | Yes | Yes |
| Mobile Specific Navigation | Yes | Yes |
| Push Notifications | Yes | Yes |
| Home Screen Access | Yes | Yes |
| No Download Required | Yes | No |
| Bypass the Marketplace | Yes | No |
| Linkable and Shareable | Yes | No |
| Index by Google | Yes | No |
| Low Data Required | Yes | No |
| Requires No Update | Yes | No |
Following are the benefits offered by a PWA app:
Reach out to us today and get started!
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.
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')
);
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);
});
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);
});
})
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"
}
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;
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).
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.
Get in touch our team
