How to Convert WebApp as PWA with Push Notification

In this article, we see how to convert a Web Application or Website to a PWA with a Push Notification using Firebase Cloud Messaging.

In the modern world, most web applications are getting converted to a PWA (Progressive Web App) because it provides features like offline support, push notification, background sync. PWA features make our web application more like a native app and give a rich user experience.

For example, great companies like Twitter and Amazon have converted their Web App to PWA for more user engagement.

What is a PWA?

PWA = (Web App) + (some native app features)

PWA is your same Web App(HTML+CSS+JS). It works the same as your Web App on all browsers as it previously did. But it can have native features when your website loads on a modern browser. It makes your web app more powerful than before and it also makes it more scalable because we can able to prefetch and cache assets in the frontend, it reduces requests to your backend server.

How PWA is different from Web App

• Installable: Your Web App can be installed like a native app
• Progressive: Works same as your web app but with some native features
• Native App Experience: User can use and navigate Web App like a native, once installed.
• Easily Accessible: Unlike our web app, there is no need for our users to type web addresses each time they visit. Once installed, it can be opened with a single tap.
• Application Caching: Before PWA, the only caching mechanism our web app implemented with is, by using HTTP cache which is only available to the browser. But with PWA we can cache things by using client-side code itself which is not available in a web app.
• (App/Play) store publishing: PWA can be published in Google Play Store and IOS App Store.

Converting your application to PWA will only make it more powerful.

Why buisness should consider PWA

While most of our clients reach us and ask to develop the Web App solution first and then they ask for Android and iOS apps. All we are going to do is build the same functionality in web App to Android/IOS App by a separate team which takes more development cost and more time to market.

But some client has a limited budget or some client may think time to market is more important for their product.

Most of the client requirements can be satisfied by PWA features themselves. For them, we suggest PWA only and give them an idea to convert their PWA as an Android App using TWA if they want to deploy in Playstore.

If your requirement truly needs native application features which can’t be satisfied by PWA. Clients can go and develop both Applications as they wish. But even in that scenario. They can deploy the PWA in the play store until Android development is completed.

Example: Titan Eyeplus

Initially, they developed a PWA app and deployed it in the play store using TWA(Trusted Web Activity). Once they completed their Android application development. They deployed their real Android Application in the play store. They achieved both time-to-market using PWA and the Cost of the development.

PWA features

PWA gives our web applications native app-like features.

The main features are:

• Installable: A web application installed like a native app.
• Caching: Application caching is possible, which gives our application offline support.
• Push Notification: Push Notification can be sent from our server to engage our users to our website.
• Geofencing: The application can be notified by an event whenever the device location change.
• Payment Request: Enable payment in your application with a great user experience like a native app.

And many more features to come in the future.

Other features are:

• Shortcuts: Quickly accessible URLs added in the manifest file.
• Web Share API: Let your application receive shared data from other applications.
• Badge API: To show notification count in your installed PWA.
• Periodic Background Sync API: saves your user’s data until it’s connected to the network.
• Contact picker: Used to pick contacts from the user’s mobile.
• File Picker: Used to access the file on local system/mobile

Advantage of PWA over Native Application

The native app performs better than PWA and has more features than PWA. But still, it has some advantages over the native app.

• PWA runs on cross-platform like Android, IOS, Desktop.
• It reduces your development cost.
• Easy feature deployment as compared to a native app.
• Easily discoverable because PWA(website) is SEO-friendly
• Secure because it works only on HTTPS

Disadvantages of PWA over native app

• Limited functionalities are available compared to a native app.
• PWA features are not guaranteed to support all devices.
• The branding of PWA is low because it’s not available in the app store or play store.

You can deploy your PWA as an Android app in the play store using android Trusted Web Activity(TWA). It will help your branding.

Things needed to convert Web App to PWA

For converting, any Web App or Website to PWA.

• Service-Worker: the core of any PWA app for Caching, Pushes Notification, a proxy for our requests.
• Manifest file: It has details about your web application. It used to download our application like a native app on the home screen.
• App Logo: High-Quality image 512 x 512 px for your app icon. App logo needed for PWA on the home screen, splash screen, etc. So we have to create a set to 1:1 ratio images for our APP using any tools.
• Responsive Design: The web app should be responsive to work on different screen sizes.

What is Service Worker:

A service worker(client-side script) is a proxy between your Web APP and the outer side, delivering push notifications for our Web App and supporting Caching.

Service Worker runs independently from the main javascript. So it doesn’t have access to DOM API. It can only access IndexedDB API, Fetch API, Cache Storage API. But it can communicate with the main thread with a message.

Service provided by service worker:

• Intercepting HTTP requests from your origin domain.
• Receive Push Notification from your server.
• Offline availability of our application

The service worker controls your application and can manipulate your requests, but it runs independently. So for that reason, the origin domain must be enabled with HTTPS to avoid a man-in-the-middle attack.

What is the Manifest file

A manifest file(manifest.json) has details about our PWA app to tell the browser.

• name: Name of the application
• short_name: Short Name for our application. If provided
•  with both property name and short_name, the browser will take short_name.
• description: Description to describe our application.
• start_url: To specify the homepage of the application when our PWA launched.
• icons: Set of images for PWA for Home screen, etc.
• background_color: To set the background colour of the splash screen in our PWA application.
• display: To customize our browser UI to show in our PWA app.
• theme_color: Theme colour of PWA app.
• scope: URL scope of our application to consider for PWA. Defaults to the location of the manifest file located.
• shortcuts:  Quick links for our PWA application.

Convert Web App to PWA

For the demo purpose, I have created a Geekflare website folder structure with static files.

• index.html – home page
• articles/
  • index.html – articles page
• authors/
  • index.html – authors page
• tools/
  • index.html – tools page
• deals/
  • index.html – deals page

If you already have any website or Web App then try to convert it to PWA by following the below steps.

Create Required images for PWA

Firstly, take your app logo and crop it in a 1:1 ratio size in 5 different sizes. I have used https://tools.crawlink.com/tools/pwa-icon-generator/ to get different image sizes quickly. So you can use it too.

Enable Push Notification

Web push notifications are sent to the browser to make our users engage/interact with our application more often. We can enable it by using

• Notification API: It is used to configure how our push notification should be shown to the user.
• Push API: It is used to receive notification messages sent from our server to the browser.

Enable Firebase Cloud Messaging and Create Subscription

Now the real part begins. For pushing notifications from your server to the user we need a unique endpoint/subscription for each user. For that, we are going to use firebase cloud messaging.

As a first step, create a firebase account by visiting this link https://firebase.google.com/ and press get started.

1. Create a new project with a name and press continue. I’m going to create it with the name Geekflare.
2. In the next step, Google Analytics is enabled by default. You can toggle that we don’t need that now and press continue. You can enable it later in your firebase console if you needed.
3. Once the project gets created