Website Development

Short Guide to Understand Progressive Web Apps in 2020

September 28, 2020

According to Statista, there are currently about 3.5 billion smartphone users worldwide who use different devices with varying connection speeds and ever-changing conditions. As web developers, it seems to be a daunting task to deal with this scenario.

However, with progressive web apps, the developers could build faster, more engaging, and resilient websites accessible to people worldwide. So what are progressive web apps? How do they operate? What are the trusted frameworks to build the best progressive web apps? Let’s figure it out in our following article. 

What are progressive web apps?

progressive web apps

Progressive web apps (PWAs) are normal websites built with popular web technologies such as CSS, HTML, and JavaScript, but they go a few steps further. They combine the web’s and native mobile apps’ best features to offer a greatly enhanced user experience. 

According to Alex Russell, one of Google Chrome developers, progressive web apps have these following characteristics: 

  • Responsive: Progressive web apps have responsive web designs because they could take advantage of any attributes of the users’ browsers and devices to operate. 
  • Connectivity-independent: Progressive web applications don’t depend on the users’ connection like traditional websites do. Their service workers allow for an excellent offline experience even with low or no network connection. 
  • App-like interactions: A progressive web app is created with the app shell model with few page refreshes, and it has an entirely native app-like look. 
  • Always up-to-date: Because of the Service Worker update process, progressive web applications can keep users alerted to whatever is happening in their apps, even if the browsers aren’t open. 
  • Secure: Since all network requests can be intercepted through service workers, progressive web apps could be hosted over HTTPS to avoid man-in-the-middle attacks or via TLS to prevent snooping
  • Discoverable: Because progressive web apps work like websites, they can be indexed in search engines. This is a primary edge over native apps that still fall behind websites regarding searchability.
  • Re-engageable: Progressive web apps can access the re-engagement UIs of the OS. For instance, they could send notifications to re-engage with the users and remind them to return even days after they left the site.
  • Installable: With browser-provided prompts, users can install PWAs on their devices’ home screen and keep the applications they prefer without the app store hassle.
  • Linkable: The current state of the application can be shown by the Uniform Resource Identifier (URI), which enables web apps to retain or reload their state as users share the app’s URL or bookmarks.

What are the basic building blocks of PWAs?

To turn your site into a valid PWA, you should provide three following fundamentals: 

  • A service worker: A service worker is a critical feature of PWAs that allows you to tap into network requests and create more smooth web experiences. It also helps you to selectively cache your site’s parts to deliver a better offline experience. 
  • The manifest file: PWAs point to a JASON file known as the manifest file that contains information about how your PWA appears and functions, namely the app name, description, icons, authors, etc.
  • A secure connection (HTTPS): To make PWAs work efficiently, you need to ensure that you serve them over a secure connection for security and trust user factors.

How do progressive web apps work?

PWA runs in a standalone window or shortcut on Windows 10 and other OS or an app icon on Android devices’ and other smartphones’ home screens. When opened, these apps load quickly due to the Cache API and IndexedDB, which store the app’s resources and data, allowing PWAs to work while offline. 

PWAs can perform background tasks like syncing and sending notifications to users even when they aren’t running thanks to their Service Workers and push notifications. Additionally, the Fetch APIs make PWAs run faster, and the data request process is smoother. 

Like the traditional web apps, PWAs are hosted entirely on the app’s servers instead of being packed into an offline file. Therefore, developers can perform the PWA update similarly to the web update on the server. Besides, it’s straightforward for users to install the apps directly from the browser rather than the app store.

If you want more information about how PWPs work and get the progressive web app tutorials, you can visit a wide range of resources online. For example, you can access Google’s web.dev site to follow tutorials on PWAs, Mozilla’s documents, or Microsoft’s developer docs for building progressive web apps.  

Which are popular progressive web app frameworks in 2020?

1. Angular

Angular is among the most popular tools for building progressive web apps. With the latest version Angular 8, developers can avoid HTML/CSS markup when developing PWAs, add new functionalities to them quickly, and save time in the testing process.

However, you have to learn Typescript to use the framework, and it’s indeed not easy. Also, this PWA framework is not in general SEO-friendly. 

2. React

React is another powerful framework for progressive web app development. It features a large JavaScript library and enables developers to share and reuse code. Moreover, the rendering process is rapid, thanks to Virtual-DOM.

However, it’s quite complicated, and you have to learn about JSX. Besides, the implementation is very tricky because it has no defined methodology. 

3. Vue

Though much newer than React and Angular, Vue features is still one of the best frameworks for PWA development. It has similar concepts like Angular and React, and relatively simple to use in rendering and coding, especially for new developers.

Nevertheless, this framework’s main drawback is that it’s owned by a single person, so the customer support team is still limited.

4. Polymer

Polymer is another fascinating choice for PWA developers because of its various tools, components, and templates. It is an independent framework using pure HTML, CSS, or JavaScript that features fully supported routing, data tier, and responsive layouts, etc. 

The downside of the Polymer framework is that it’s not SEO friendly, and it’s a bit slower than other frameworks when it comes to reloading time. 

5. Ionic

The Ionic framework enables developers to utilize such competing frameworks as Angular, React, or Vue to build web applications. The framework also offers PWA tool kits and comprehensive instructions for PWA development. 

However, Ionic renders graphic elements via the browser, so it can significantly defer the moment full images appear on the device’s screen, which means poor app performance. 

What are the best progressive web apps’ examples?

progressive web apps

Undoubtedly, there are so many examples of progressive web apps that contributed to the increase in conversions and customer engagement of many businesses. Here are some of them: 

1. Twitter 

Understanding the obstacles their users encounter with their slow mobile networks​ and limited space on smartphones, Twitter developed their PWA called Twitter Lite in 2017. This app could load more quickly, consume lower data, and be more accessible. 

The benefit of reduced loading time allowed Twitter Light users to send 75% more tweets and have 20% lower bounce rates. The “Add to Homescreen” prompt and push notifications helped Twitter Lite attract about 250,000 users per day, each visiting the site four times a day.

2. Pinterest

Pinterest is a popular application where users can find and curate images, videos, and products. To improve their app experience and raise the rate of users who convert into signing up and installing mobile apps, Pinterest started to develop a PWA. 

Consequently, the time spent on the mobile web and the user-generated ads revenue increased by more or less 40%. Moreover, the ad click-through rates rose by 50%, and the proportion of user engagement is up by 60%.

3. Starbucks

Starbucks’ PWA features a similar experience for customers like their existing native apps. This PWA allows users to browse the menu, customize their food and drink orders, or add items to their carts when offline. 

After launching PWA, the Starbucks web app becomes popular among customers, and more and more web users order food and drinks each day. Currently, the number of desktop users placing orders is approximately equal to that of mobile app users. 

4. Uber

The Uber PWA is built to facilitate the car booking procedure on a slow and unreliable network connection. Outside of offering an app-like experience on modern browsers, it’s also available for low-end devices that are not compatible with the native Uber app.

Additionally, the Uber PWA facilitates quick ride requests irrespective of location, network connection, browsers, and devices. Thus, Uber first-time riders are more likely to book their first ride on the web instead of downloading and installing the app.

5. Alibaba

Alibaba’s users found that their app experience wasn’t up to par, and they were unwilling to download and install the app. Hence, Alibaba had to build a progressive web application to deliver a significantly improved experience for first-time visitors and repeat customers.

As a result, the much smoother experience for first-timers and push notifications, and home screen shortcuts were useful in re-engaging seasoned users. Alibaba could increase the re-engagement rate quickly and catch up with that of its native apps. 

The final thought about progressive web apps

All in all, with common frameworks like React, Angular, Vue, Polymer, Ionic, etc. developers can build the best progressive apps that have many edges over native mobile apps and traditional web pages in terms of functionalities, user offline experience, and device’s space consumption. Such examples of progressive web apps as Twitter, Starbucks, Uber, and many more have proved PWA as an appropriate choice for businesses to offer significantly improved experience for users, increase conversion rates, and customer engagement.

Other articles you might like:

Also published on

Share post on

Get in touch

Simply register below to receive our weekly newsletters with the newest blog posts