How to publish PWA app on Google Play Store – Step by step guide

Progressive Web Apps — The business perspective

Progressive Web Apps (PWA) has come a long way, and now it is being adopted by the world’s largest companies such as Google, Uber, Twitter, Starbucks, etc.

To keep up with the pace of fast-changing market scenarios, PWAs are proving to be a very useful approach instead of going for native app development.

Most of the businesses are asking this question — What exactly is PWA and how can I use PWA for my business?

So, what exactly is PWA?

A PWA is a web app that can be installed on a user device while bypassing the Google Play Store and Apple App Store and can be used offline.

It helps businesses to reduce the overall development cost and maximize engagement with their users.

Progressive Web Apps uses progressive enhancements that offers features similar to a native mobile application.

Progressive Web Apps and Android Instant Apps combined together lets you create beautiful apps with material design and animations without the need of installing them on any device.

Have you ever encountered a popup while browsing a website on mobile device saying “ADD TO HOME SCREEN”? When you click on the button, the application installs itself in the background. Now that application shows in your app drawer and offers the experience of a native mobile application.

The app was downloaded from a web application without seeing the face of the Play Store or App Store. Isn’t it great!!!

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. It is –

Progressive — because it lazy-loads itself.

Web — because it’s written in the languages of the Web — HTML, CSS, and, JavaScript.

App — because it installs and runs code on the mobile device.

Features of PWA

The concept of PWA revolves around the following things,

Progressive
PWA should work and compatible with all browsers such as Chrome, Safari, Firefox, and all devices.

Responsive
It should be responsive so that it may fit into all screens, irrelevant to the devices (such as mobile, tab) it is being used.

Connectivity Independent
It should provide rich user-experience even on low-quality networks (such as 2G, 3G, 4G, etc.) and work offline in case there is no stable connection.

App-Like Experience
Though it is not a native app at all, it should provide an app-like experience and users should add PWA from the browsers, itself.

Safe
It should be served via HTTPS so that users would feel secure using it as they find in the native apps.

Push Notifications
It should engage users sending them to push notification, containing updates and reminders.

Installable
Users should be allowed to install the website as an application, and if possible they should be prompted with the pop-up suggesting ‘Add to Homescreen.’

Linkable
It should be shared, and users or receiver should not require to install it.

Advantages of using PWA

Better user engagement resulting in better conversions

Better user engagement resulting in better conversions

Smartphones have taken the internet by storm, and today, every company needs to focus on mobile-first experience to outperform their competitors.

There are a number of case studies available on the internet that you can check showcasing how the mobile-first transition increased their revenues and acquisitions.

Here are a few interesting case studies –

Treebo — Treebo launched their PWA, and their conversation rate increased by 4X.

Tinder — Tinder launched their PWA to cut the load time to 4.69 seconds from 11.91 seconds. Their PWA app is 90% smaller than their native Android app.

Uber — Uber launched their PWA to cut the load time on 2G networks. Their PWA app is only 50k gzipped and only takes 3 seconds to load even on a 2G network.

There are a lot of other case studies available for PWA. You can check them out here — https://www.pwastats.com/

Cost savings

There are a number of ways to build a PWA using service workers. Service workers are tools that are installed on a user device which monitor the application to check which files need to be reloaded and which files can be cached.

It is a much cheaper way of building a mobile app than building a platform-specific native mobile app.

Pre-requisite for setting up PWA

Add/Install Angular CLI using the following code –

Now generate a project using the following command –

Move into the new project you have just created using the command as following –

And add Angular PWA using the following code

It performs the following tasks –

1. Adds the @angular/service-worker package to our project
2. Enables support for service worker in the CLI
3. Imports the service worker and registers it in the app module
4. Updates the manifest.json file link to index.html and add meta tags for theme-color which we can change manually.
5. Install icon file for PWA
6. Create ngsw-config.json service worker configuration file which specifies caching behavior and other settings.

Structure of PWA

manifest.json

It is a simple JSON file that provides required information to the browser and how it should behave when installed on a user’s device.

Different types of attributes in the manifest.json file includes –

• name
• short_name
• description
• theme_color
• background_color

The short_name is the name of the application, which will be visible to the user when he/she add it to the home screen.

Icons

Icons are the most critical part of the PWA app as it will be displayed on the user’s home screen. So it becomes important to provide icons in proposed sizes.

You can also use various online icon generator tools to generate icons in respective sizes.

You can see a node of icons in the manifest.json file. Make sure that you provide suitable icon sizes as mentioned in the file –

Read More