7 Ways Progressive Web Apps Change the Web

May 22, 2018

As mobile device usage rises, progressive web apps (PWAs) represent a user-friendly way to bridge the gap between websites and mobile apps. This article explains the benefits of PWAs.

The number of worldwide smartphone users is expected to pass five billion by 2019, according to a report by Statista.

Statista’s numbers suggest two conclusions about the behavior of mobile device users:

  • World connectivity will increase courtesy of mobile devices.
  • Smartphones are popular because they’re convenient. You might be reading this article on your phone.

Businesses cannot ignore mobile device users when drafting a business strategy. Solutions that appeal to mobile users are fast, affordable, and convenient.

In the past decade, web and mobile app development have experienced a tectonic shift in what’s possible. The rise of device-compatible responsive web design, including progressive web applications (PWAs) proves just that.

PWAs are a way to address users’ desire for mobile-ready, easy-to-use apps.

What are Progressive Web Apps?

PWAs are web applications that run on mobile browsers. They don’t have multiple native applications. It’s like a native app, but with the web app-like experience.

“Progressive” refers to enhancements that aim for better user engagement while keeping the user interface simple and clean. Andrew Gazdecki of Bizness Apps refers to PWAs as “the future of mobile.”

PWAs are barely two years old. Google began exploring the technology behind PWAs in 2015. Since then, Google has aggressively promoted PWAs during talks at Google I/O 2017 and Google's developer conference.

According to Frances Berriman, who helped name PWAs, “[PWAs are] for those users who have to pay per MB for their downloads, who have old phones, who don’t want to, or can’t, be on a native-app-based operating system.”

That’s why, Berriman writes, PWAs were first proposed to solve problems with native mobile apps and mobile websites.

While websites brought in more traffic, they were slower. Native mobile apps needed multiple plugins and installations to work efficiently, and they often had device compatibility issues.

PWAs were developed to fix both those issues.

Examples of Progressive Web Apps

These three companies have created PWAs with excellent results.

1. Twitter

Just last year, the social media platform Twitter announced its own PWA: Twitter Lite. Twitter Lite was meant to reduce loading time and data consumption. It was an instant hit amongst users.

According to Developers.Google, Twitter Lite saw:

  • 65% increase in pages per session compared to the standard Twitter app
  • 75% increase in Tweets sent
  • 20% decrease in bounce rate

Twitter has more than 328 million monthly active users, so Twitter Lite’s achievements show how many people are willing to use this PWA.

2. AliExpress

AliExpress is a famous e-commerce platform. Their PWA was meant to improve their visitor re-engagements, retention rates, and return on investment (ROI). They weren’t disappointed.

AliExpress’ PWA experienced the following across all browsers:

  • 104% increase in conversion rate for new users
  • 82% increase in iOS conversion rate
  • 2X more pages visited per session per user
  • 74% increase in time spent per session

Their PWA was a success because it led to much higher conversion rates.

3. Forbes

Forbes, a media company that specializes in business news, focused on improving user engagement and providing visual content to promote offline reading. The PWA site saw:

  • 20% increase in impressions per page
  • 12% increase in the number of users
  • 6x increase in the number of readers completing articles

Other companies that have created PWAs include Alibaba, Medium, Tinder, Flipboard, Snapdeal, The Financial Times, GitHub Explorer, and Offline Wikipedia.

7 Reasons You Should Opt for Progressive Web Apps

Here are some of the functions that make PWAs easier to use.

1. PWAs Don’t Need Connectivity

Imagine that you’re lost somewhere without good service and you’re low on gas for your car. You can’t use Google Maps to find a nearby gas station, and you’re not sure what to do.

PWAs solve this issue by working offline or on flaky internet connections. They load almost instantly and save the information you entered when you last accessed the app.

PWAs can work offline because of service workers: not humans, but proxy servers that act as a middleman between the app, the browser, and the network. Rather than just caching the response data, service workers cache the actual response.

This structure cuts down on connectivity issues and provides a seamless connection to the network.

2. PWAs Use the Best Features of Mobile Apps and Websites

PWAs have the fluidity of mobile apps plus the features of a website.

Technically, PWAs are a set of web pages, like a website. They are rendered on a browser, like Google Chrome, using HTML5, CSS3, JavaScript, and media queries. PWAs also use API integrations when necessary, just like mobile apps.

Website Features

PWAs aren’t limited by browser or device. Like a website, PWAs provide:

  • Instant access via browsers
  • Quick load speed
  • Index-able, shareable content

Mobile App Features

Because app developers use the React Native frameworks, which creates superior web functionalities, PWAs can use mobile app features like:

  • Push Notifications
  • Full-screen functionality
  • Splash screens
  • Offline content

For example, Flipkart, a famous Indian e-commerce portal, uses all these things in its PWA.

Flipkart ecommerce site progressive web app

Their push notifications let users know when items they want have dropped in price, and their offline browsing function allows users to shop even when they have no Internet connection.

Perfect for those who wish to revisit their wishlist even offline. Pre-caching helps keep the PWA up to date, so users get the latest content and updates as soon as they open the app.

3. PWAs Are Easy to Develop & Use

PWAs are easy to develop.

If you’re a progressive web app developer, you don’t need to change your web framework or use new tools. All you need to know is JavaScript.

Aaron Gustafson, web standards and accessibility advocate at Microsoft, compared PWAs to a single peanut M&M:

  • The peanut is the core Web HTML page content
  • The chocolate coating is the CSS presentation layer
  • The candy shell is JavaScript
  • The different colors are the various browser on which PWAs are run

Knowing JavaScript will suffice for those looking to make a PWA of their own website or mobile app.

In fact, you can even take your existing site and convert it into a PWA. Read this step-by-step guide on migrating websites to PWAs.

4. PWAs Don’t Have App Store Restrictions

PWA developers don’t need to build separate app versions for Android and iOS.

Since PWAs are hosted on a web server, you can skip building different versions of the same application. They even auto-update so that users don’t have to update manually.

All this translates to an improved download and usage rate across the board since users don’t have to worry about whether a PWA is only available on Android or iOS.

Flipkart Lite noted a 50% rise in new customer acquisition, with 60% of their visitors ditching Flipkart’s native app for the PWA. MakeMyTrip's PWA produced a 150% increase in shopping sessions.

5. PWAs Are Linkable

PWAs have the “genes” of a mobile website, meaning that they are highly linkable.

In fact, every page of a PWA carries a unique URL, just like a website. (Clutch.co has deep-linkable URLs for each service page, and for this blog post as well- check the address bar). These individual pages can be easily opened on new browser windows, bookmarked, and shared on social.

For example, the Forbes PWA lets users link to posts with ease.

Forbes India PWA URL bar

Users can then post those URLs on social media or message them to friends.

6. PWAs are Highly Discoverable

PWAs are easily indexed by search engines, which makes them more visible.

This is because of the ‘web’ part of a progressive web app. PWA use HTML for preloaded content and meta tags. This enables search engine bots to read and index them, crawling them for easier accessibility and higher discoverability.

7. PWAs don’t take up Mobile Space

Since PWAs are hosted on web servers, they don’t take up much space on your phone.

Unlike native apps, PWAs don’t require users to download the app. However, users can save them as an icon on their home screen for easier access. This facility is available for both iOS and Android users.

For instance, e-commerce portal Flipkart’s PWA Flipkart Lite gives you an option to save the app on the home screen.

This makes Flipkart available as a shortcut.

PWAs Are Versatile and User-Friendly

Progressive web apps provide the shareability of the web and the look of traditional mobile apps.

Businesses like Forbes, the Financial Times, and Lancome have already adopted PWAs in order to reach their customers better. They’ve experienced excellent results, and your business can, too. 


About the Author

Tanya Kumari headshot content marketer Classic InformaticsTanya Kumari: Content marketer at Classic Informatics. Blogger. Tech-savvy. Cartoonist. Potterhead. Food lover.

Compare Top Mobile App Development Companies

CHECK OUT THE LEADERS MATRIX

See how app developers compare in the industry to find the best fit for your business.

VIEW THE MATRIX >