How to Build a Progressive Web Application?

The market in mobile software products displays two clear trends. First, we are increasingly dependent on our smartphones in a number of ways. Second, the number of smartphone users is increasing. According to forecasts, by 2021 around 48% of the world's population will use a smartphone.

No wonder that software products are making great efforts to get into our smartphones. However, there is one more trend that we should take into account when analyzing what is happening on the mobile market: smartphone users are not as willing to install new apps as they used to be. In 2017, about half of US smartphone users did not download a single app within a month.

build-progressive-web-application-download-appstore-mobile

Image credit: TechCrunch

One reason for such reluctance may be the unobvious app discovery path from the moment the user learns about the app until they install it. To download and install an app, the user needs to switch from the browser to Google Play or Apple Store, search for the app and install it. If the website has links to Google Play or App Store, which most websites do, the user still needs to switch interfaces and wait until the app is downloaded.

Let us throw in some more statistics. Research comparing the user reach and user engagement rates in mobile web and mobile apps showed that these trends oppose each other. Mobile web reach was much higher than that of native mobile apps, but the user engagement of mobile apps greatly exceeded the engagement with mobile web.

build-progressive-web-application-user-engagement

build-progressive-web-application-user-reach-popularity-on-the-web

Image credit: Hackernoon

To put it simply, users discover mobile websites more easily, but spend more time with mobile apps. But what if there was something in-between that could achieve high rates in both measurements? The solution is progressive web apps (PWAs).

Another Google product, this technology has been around for about three years, but has already earned the support and appreciation of many businesses such as Twitter, Forbes, and Pinterest. It combines the features of websites and mobile apps, resulting in a much smoother user flow, along with other benefits. However, let’s start from the beginning.

What are progressive web apps?

PWAs are websites behaving like mobile apps. They are added to your smartphone screen just like a normal app icon. They can have UI controls similar to those of native apps.

How do you know whether a website works as a PWA? Such websites have an Add to home screen button or link that installs the app directly to your smartphone or tablet. No need for Google Play or the App Store – just one tap!

build-progressive-web-application-mobile-app-development

Image credit: C# Corner

The benefits of PWAs are not limited to easy installation. PWAs have other attractive features, and we will look at them briefly.

Progressive web apps’ features and benefits

The concept of progressive web apps – native app-like behavior while retaining some features of a website – evolved into a whole set of characteristics that are specific to PWAs.

Offline mode

Everybody knows that with no Internet or slow connection, websites are useless. However, when a website turns into a progressive web app, it can work offline with the same effectiveness as when you are connected to the Internet.

Due to their caching mechanisms and other storage functions, PWAs can provide the necessary data even when completely offline – just like regular mobile apps. This feature can be particularly useful for e-commerce apps where users can browse product catalogs in offline mode.

Offline mode can greatly increase the user engagement, allowing users to spend time on the app even when they are not connected to the Internet.

Responsiveness

PWAs retain the same responsiveness that mobile browsers and native apps have. Their size and layout adapt to the parameters of the device screen they are running on. Such high responsiveness allows supporting multiple devices including smartphones, tablets, and even desktops.

App-like controls

A progressive web app features the UI controls similar to those of a native mobile app while disabling the functions specific to web apps. For example, in a PWA, you will not see the address bar. At the same time, features such as text selection with the prompts to copy or share are disabled as well.

The navigation within the app is similar to that in native mobile applications, creating a natural app-like user experience.

build-progressive-web-application-custom-software-development

Image credit: Forbes

Indexing in search engines

With all their similarity to native apps, PWAs are still websites accessible by URLs. While URLs are lurking somewhere in the background, invisible to the user, they are still indexable by search engines.

This factor is especially relevant now that Google is switching to mobile-first indexing. It means that the indexing is focused on the mobile content, giving it preference in response to the user’s query. Google is choosing this strategy because most users now access it from mobile devices.

PWAs are better suited to mobile-first indexing, increasing user reach for businesses.

No need to post the app in app stores

Since PWAs are downloaded directly from the website, there is no need to publish the app in Google Play or App Store. Skipping the app store publishing means a much shorter time to market, as app stores sometimes have rather steep requirements for the apps they accept.

For the sake of fairness, we should say that the app store requirements are intended to ensure the app’s compatibility, security, effectiveness, and responsiveness. While fulfilling all requirements may be a lengthy process, at the end of the day, you are going to have a properly functioning app.

On the other hand, with PWAs, the development company can release an update whenever necessary and push it without waiting for approval from the app stores. This consideration may be important when an update includes a security patch.

Higher performance

The caching mechanisms applied in PWAs ensure faster response, shorter loading times, and overall higher app performance. Today, users are rather demanding when it comes to loading times, so the quicker the app loads and responds, the better.

Faster loading improves general user experience, increasing engagement and retention rates compared with websites.

Push notifications

PWAs allow for leveraging hardware-related benefits such as push notifications. Push notifications which remind users about the app, thus working towards increasing retention rate, are a feature of native apps.

PWAs can include push notifications structured and scheduled in accordance with business needs. As users tend to view push notifications more often than emails or social media posts, progressive web apps get more and better quality attention from users than regular websites do.

Disadvantages of progressive web apps

Nothing is perfect, and PWAs are no exception. Along with the benefits that they bring to users and owners, the disadvantages also need to be considered.

Limited use of hardware functions

Unlike native apps, PWAs have limited access to certain smartphone functions such as Bluetooth, the fingerprint scanner, advanced camera controls, vicinity sensors, and the contact list. This may create limitations in the user experience (ie, restrict their personalization).

Higher battery consumption

Since PWAs are written in high-level programming languages, they use more power when running on a mobile device. Smartphones and tablets consume more energy when interpreting the PWA code.

The increased battery drain may be a discouraging factor for users, especially those who spend a lot of time on the move and have difficulties finding places to charge their devices.

Absence in app stores

Although we noted it as a benefit, the absence of PWAs in the popular app stores reduces their visibility to users. Of course, for people browsing websites, PWAs are very convenient. However, for those accustomed to searching for apps in the app stores, progressive web apps will be hard to find.

How to build a progressive web app

Depending on your situation, you can either develop a progressive web app from scratch or make one out of a functioning website. In both cases, you will get a standalone app which has the features of a website.

Regardless of the strategy you choose, certain components must be present in any progressive web app.

Web app manifest

A web app manifest is a .json file containing the meta information about the app. The manifest defines the app name, the short name, background color, icon and other data. Also, it contains the URL that is used to launch the PWA.

You can either write the file on your own or use an online web app manifest generator to create .json files according to your specifications.

build-progressive-web-application-coding-software-solution-development-team

Image credit: Google Developers

Service worker

The service worker is one of the key components of PWA development. It is a JavaScript file that serves as the proxy between the PWA and the network. Service workers cache data for the offline use of PWAs, intercept network requests, and carry push notifications. Service workers make the PWA load faster using the cached data.

HTTPS

Progressive web apps run only over a secure connection. Thus, when creating a progressive web app, getting an SSL certificate is a mandatory step. You can try trusted SSL certificate providers such as Comodo or Cloudflare to obtain the certificate and ensure that the connection over which your progressive web app operates is secure.

Icon

The icon is a .jpg or .png file containing the image that is added to the home screen and used to launch the PWA. The icon file source and size are specified in the web app manifest.

Usually, you need to include icons of different sizes – for example, Google requires 512x512 and 192x192 icons for the Chrome browser. The web app manifest generators that we mentioned above can help you with creating icons of different sizes – you just need to upload one file, and the tool will generate the other sizes.

These are the basic components to include in a progressive web app. When building a PWA, you can use Google’s Progressive Web App Checklist to test the performance of all PWA components.

How much does it cost to build a PWA?

Of course, the correct answer is “it depends” on the overall app complexity, your team’s skillset, and the availability of ready-made components; however, we will try to give a ballpark figure. In terms of the cost of development, progressive web apps are between websites and native apps. The cost for a custom feature-rich native application can start at $50,000, and you usually need two versions – for iOS and Android. Such figures may be too expensive for many startups. Hybrid apps that work on both platforms are less expensive but, still, their cost is rather considerable.

Progressive web apps, in turn, may set you back as much as $25,000, and you are getting the app-like functionality together with the other benefits of a PWA.

Progressive web apps examples

The list of brand names that have already adopted the PWA technology to increase their engagement and conversion rates is rather impressive. Let’s look at some of the examples:

Pinterest

build-progressive-web-application-best-pwa-examples

Image credit: Medium

Pinterest, a corkboard-like service for storing images, videos, notes, and ideas, launched its PWA in 2017 in an attempt to revamp its website, which was bringing too few conversions. The result was that the PWA brought the business a 40% increase in the time users spent on the website, a 44% increase in the user-generated revenue, and a 60% increase in core engagements.

Lancôme

build-progressive-web-application-ecommerce-app-beauty-software

This French cosmetics brand also implemented a PWA to try to increase their conversion rate and reduce their bounce rate. The analysis of Lancôme’s PWA performance showed a 17% increase in the conversion rate, a 15% reduction in the bounce rate, and an 8% increase in the conversion rate for abandoned carts recovered after a push notification.

AliExpress

build-progressive-web-application-online-shopping-e-commerce-software-marketplace

The Chinese retailer adopted PWA technology as early as 2016. This innovation brought the business a stunning 104% increase in the conversion rate, with an 82% increase in conversions on the iOS platform alone. The same study also showed that the implementation of the PWA increased the time users spent on the website per session by 74%.

Progressive web apps seem to be a silver bullet for businesses that are experiencing a decline in their user stats and that want to make the user experience smoother and more attractive. Together with a relatively low cost and a shorter time needed to build a PWA, they can be a great solution both for startups and businesses with a long history.

With a PWA, you do not need a website and a mobile app, because you are getting a product that has the features of both. We believe that many businesses can profit from using this technology and we will be happy to help you make the most of it. Contact us, and our business analysts, UI experts and developers will design and build a progressive web app that can bring your business to a whole new level.

↑ Go up

Similar post