Progressive Web Apps: The Future of Web Applications

6 min readAug 31, 2019

Progressive Web Apps (PWAs) are those Web Apps that combine the best features of Web and Native Apps. Think of PWAs as web apps on steroids.

Recently, I was intrigued by the rising popularity of Progressive Web Apps (PWAs). So I decided to do some analysis of this exciting technology that is taking companies and businesses by storm and driving up user engagement and experience.

In this article, I will discuss what a progressive web app is, key features it offers and why do you need to build a PWA. I will also talk about the advantages and disadvantages of going progressive along with mentioning few applications which are already PWAs that you use in your day-to-day activities.

Let's get started.

What is a Progressive Web App (PWA)?

PWAs are websites that behave like native applications but without the hassle of a mobile app store. They leverage web platform capabilities, recent web standards, and user experience best practices to engage with visitors and customers to increase return on investment.

Frances Berriman (Designer) and Alex Russell (Engineer at Google) came up with the concept of Progressive Web Apps. Alex described PWAs as:

“Just websites that took all the right vitamins”

Features of a PWA

Rich experience of PWAs is powered by the following features:

A Valid Web Manifest File: The Web Manifest File contains metadata about your PWA to describe it to the browser, including icons used to represent the app on the home screen and desktop.
Service Worker: They enable applications to control network requests, cache those requests to improve performance, and provide offline access to cached content. Hence, PWAs can offer the following features:

Latest content

When a PWA is installed, the content can be updated in the background from the moment there is an internet connection. So, each time you launch it, you have the latest version of the content. The state is also kept, meaning when you leave the PWA at a certain point you will return to that specific screen.

Offline usage

You can run PWA’s offline. Moreover, depending on the Operating System, they can store a certain amount of data for a certain period on the device. When a network glitch occurs, you can still access the content.

Push notifications

Thanks to the service workers you can receive push notifications on smartphones as well as on desktop PCs if your OS and browser support it.

3. Application Shell: An application shell is the framework of the user interface that loads on your user screen once you open the application. The app shell provides interactions and navigations like a native app. An application shell is designed to use minimum data and caches only the essential files for the app, making it frugal. When cached by the service worker, an application shell makes it possible to quickly get the meaningful components on the screen on repeated visits without any network. Although the app shell is not a mandatory requirement for building a PWA, its inclusion promises substantial performance and speed.

4. Served Via HTTPS: HTTPS encrypts network requests to protect your data and enables modern web platform features.

Why do you need a PWA?

Fast: PWAs provide consistently fast experience for users. From the moment user downloads the app to the moment they start interacting with it, everything happens extremely fast. It is also fast to start the app again without hitting the network.
Reliable: Progressive web apps can start faster and work even if there is no internet connection when you use a service worker with a proper caching strategy. This can be advantageous because you can eliminate network requests and the need for a connection when your application needs to run.
User Engagement: Through push notifications, you can drive up user engagement by keeping the user notified and engaged with the app.
Integrated User Experience: With PWAs, the experience is integrated and seamless. This is because they sit in the user’s home screen, send push notifications and have access to the device’s functionalities like native apps.

Advantages of using PWAs

Safe and Secure: Without sacrificing performance or security, PWAs provide familiar app experience as to what users demand. PWAs combat the problem of content being stolen, shared or hacked via HTTPs
Easy Updates: PWAs have added the benefits of pushing updates by the developers themselves and not the users. The new updates and features can be added remotely by the development team. Users will notice new and improved features but do not have to approve updates themselves.
Access Anywhere: Since PWAs are offered in the form of an interactive website, they are available to everyone with internet access and a browser. PWAs do not need to be downloaded and are instantly compatible. There is no dependency on the user having enough storage space. PWAs have an added benefit of not needing to be upgraded by the user. If the newer version comes out, they have instant access to it by merely visiting the website.
Independence: The type of device, its model, and memory resources, or the type of web browser do not matter. The progressive application works independently of the environment in which it will be launched.

Disadvantages of using PWAs

Missing Out on App Store Traffic: Although it is a benefit that PWA does not follow the long process of app downloading like native applications, they also miss out on a large chunk of users who primarily search for apps on the app store.
Limited Functionality: PWAs have limited access to vicinity sensors, NFC, fingerprint scanner, Bluetooth, advanced camera controls, geofencing, and others. Additionally, its usage drains your mobile’s battery faster than any other native application.

Companies using PWAs

Twitter launched Twitter Lite, a Progressive Web Application in April 2017. Their goals were simple: faster load times, more engagement and lower data consumption. They were able to achieve all three. 65% increase in pages per session 75% increase in Tweets sent 20% decrease in bounce rate
Google reports that banners implemented in Progressive Web Apps convert from 5 to 6 times more often than banners on websites.
Uber PWA at 2G range loads in less than 3 seconds and takes less than 50kb.
Tinder PWA reduced the loading time from 11.91 seconds to 4.69 seconds and — most importantly — it is smaller than the native Android app.
Starbucks, Lyft, Forbes, Trivago and thousands of other well-known brands, worldwide are adopting progressive web applications. Each one reporting improved user engagement numbers. More time on site increased sales and all testify their site speed has improved.
The average load time for a PWA-based page is 2.75 seconds.
PWA takes an average of 25x less disk space than a dedicated application.
Progressive Web Apps loads up to 15x faster than a regular website.

Summary

As a crossover between native and web apps, PWAs provide advantages similar to a native app at a much more affordable price. Yes, there are some disadvantages too but its benefits successfully overshadow all of it or most of it.

For businesses looking for native app functionalities with added benefits and less budget, PWA can be the answer.

References

About me

Amrut is a Full Stack Software Engineer who is passionate about tech and web and mobile applications. He likes to write about coding, investing, trading, finance, and economics. He regularly writes for popular publications like The Startup, Noteworthy — The Journal Blog, HackerNoon.com, Data Driven Investor and codeburst.io.