DEV Community

Prakash Donga for SoluteLabs

Posted on • Updated on • Originally published at solutelabs.com

State of Progressive Web Applications in 2020.

As we move into 2020, a host of new technologies are creating waves, Progressive Web Apps (PWAs), that have been "officially" around for more than 5 years now, are slowly gaining access to more and more mobile screens.

PWA seems to be trending among the state of mobile app development in 2020.

-------

What is a PWA? How did they come into existence? How do they work? Will they eventually kill the native apps?

In this article, we try to find the answer to all these questions, while telling you a few success stories of companies that have ported to PWA.

In technical terms, a PWA is a type of web application that is a result of unique cross-platform app development methodology, delivering web pages that are optimized for the mobile, that you can install on your phone through your browser.

In simple terms, Progressive Web Apps give you the feel of a native application while you are browsing the web on your mobile, without actually installing the application on your mobile phone.

PWAs are the reason why certain websites, like Alibaba, the world's largest B2B trading platform, offer a seamless browsing experience on mobile.

In fact, after switching over to a PWA, Alibaba's mobile conversions increased by 76% and engagement grew by 4X!!

So how did it all begin? Let's start with a little history.

Table of Contents

  1. History of PWA

  2. Benefits of PWA

  3. Successful PWA stories

  4. What makes PWA tick? How PWAs work

  5. Will PWAs kill native apps? PWAs in 2020 and beyond

History of PWAs

Although Google officially introduced the term Progressive Web Applications as a new standard in web development during Google's IO conference in 2016, the concept can initially be attributed to Steve Jobs.

During the historic Apple iPhone launch of 2007, Jobs predicted that developers can build amazing web experiences using Web 2.0 and Ajax that look exactly like an application on iPhones.

But a year later, Apple introduced the App Store, and when Google also jumped into the app race with the Play store, the era of native apps dominating the mobile internet world began. These apps were fast, responsive, and ensured that the user had the best experience when looking for something online.

The concept of PWAs went into cold storage for a few years, before 2 Google Engineers, Alex Russel and Frances Berriman, observed a new class of websites that were delivering a much better UX than the traditional web sites.

They called these web applications "Progressive Web Applications" (PWAs for short) and Alex Russel called them " Responsive, connectivity - independent, app-like, fresh, safe, discoverable,re-engageable, installable, linkable web-experiences."

PWAs were initially supported by Android, Chrome OS, and Windows, and Apple announced support to PWA technology with the introduction of "Support Workers" in 2018.

Benefits of Progressive Web Apps

The reason why PWAs have become all the rage can be attributed to the following key features of PWA:

Advantages of building Progressive Web Apps (PWAs)

  1. Short or Near instantaneous loading time: With PWAs, several elements of the web page are cached the first time you open it, meaning the loading time for a PWA is much lesser than a mobile-optimized website. In addition, PWAs don't need the processing power or the storage of a native app, which means their interactive elements will respond immediately to clicks and other user gestures.

  2. Functions with limited connectivity: For people who are still in the developing parts of the world such as the Middle East or Africa, Internet connectivity is a huge problem. But PWAs "Service Workers," which are basically lines of Javascript code that enable it to have instant access to cached resources, means you can continue your browsing experience even when the network is slow, sketchy.

  3. Better User Experience: PWAs try and imitate the native app, which means they can provide similar functionalities as an app but with lesser resources. When you combine this with speed and the ability to deliver a good UX over slower connections, and users are bound to come back to PWAs.

  4. Discoverability: PWAs exist on the web, just like any other website, and they can easily be found via a search engine or a social share. Since you don't need to go to a native app store to find, authenticate and install the application, it makes PWAs easier to integrate with your content and social strategies.

  5. Easier Updates: Since a PWA is not like a regular native app that requires you to manually install an update via the app store, updating a PWA is much easier and updates can be rolled out even without disturbing the user.

Other than these, PWAs also comes with a bunch of other benefits, which include the ability to send out push notifications, say to promote a new blog post that you just published. The smaller size of the PWA along with the faster installation process also means the marketers have a greater chance of successful onboarding (from website to the app), and decreased Cost of User Acquisition (CAC).

Successful PWA stories

A lot of companies have switched over to PWA to enhance user engagement, including:

Twitter: Twitter launched Twitter Lite, a PWA in 2017, which helped them connect with mobile users more deeply while consuming fewer data. The PWA relies on cached data and optimized images, and the Twitter lite PWA is just 600KB, compared to the 23.5 MB size of the native app available on the Play store.

Tinder: The now-infamous dating app also launched their PWA in 2017, and found that there was a higher user interaction with the PWA over the native app, with users spending more time messaging on the web application compared to the native app, along with increased session lengths and purchases in par with the native Tinder app.

Lilly Pulitzer: This resort- wear brand has a customer base that is always on the move, so they needed their mobile website to provide a smooth experience. They invested in an eCommerce PWA, and within a year, saw an 80% boost in its traffic and a 33% increase in conversions.

Trivago: The German-based hotel search engine, one of the largest in the business, wanted to be at the forefront when it came to their mobile website and implemented a PWA in a phased manner to make use of the speed and use of lesser resources. Today, Trivago's PWA powered website is available in 33 languages, across 55 countries, and the company has seen. User Engagement increased by more than 150%.

Top PWA Examples

The list of successful PWA adoptions goes on and, and includes big names such as Staples.com, Alibaba, Starbucks, and eBay.

What makes PWA's tick? How PWAs work

PWAs use a quirky architecture consisting of four pillars, which work in tandem to provide the native app-like user experience. These four are:

  1. Service Worker: When you visit a PWA powered website for the first time, the Service Worker shifts gears, downloading all the content in the background. With the content already cached on the device, the site loads much faster. Service Workers also enable websites to send you push notifications.

  2. Web Manifest: The web app manifest gives you information about the application(name, author, icon, and description) in a JSON text file. The web manifest makes the installation of web applications to the home screen possible, meaning faster access and a better UX.

  3. HTTPS: One of the prerequisites of a Service Worker is that they make websites available over Https, meaning the connection is secure.

  4. Icon: The display end of the PWA that the user will be able to see once he installs the application.

Will PWAs replace Native apps? PWAs in 2020 and beyond

The jury is still out on this one. While a PWA does provide faster load times, easier updates and better user experience in general, PWAs are still in their nascent stage.

iOS still does not support all the PWA features mentioned in this article, since Apple considers PWA to be a "Googler term."

Features such as push notifications, background sync, and web manifest file are still not supported on the Safari browser.

But, according to this article, Apple is slowly encouraging its users to move away from the native App store and create web applications instead, so we may have more and more PWAs that are iOS compliant in the future.

As technology improves and heavyweights such as Google put more and more muscle behind PWAs, it is highly possible that PWAs will replace native apps in the coming decade.

Share your thoughts about how the future of Progressive Web Apps (PWAs) look like.

Oldest comments (0)