What Are Progressive Web Apps & Who's Using Them?

More and more technology companies are adopting progressive web applications (PWAs). But, what are PWAs and what's so great about them? We'll cover the basics of PWAs and how they can change your entire development strategy.

You've probably heard the terms "Progressive Web Application" or "PWA" floating around for a few years, and you've probably been wondering what they are and why you should care about them. By many accounts, progressive web apps are the future of user experience (UX). Some of the biggest technology companies in the world are adopting PWAs to streamline their development processes while providing an enhanced, more inclusive UX. While the popularity of progressive web applications has exploded in the past five years, the concept was first introduced by Steve Jobs at Macworld 2007.

Progressive web applications employ modern web APIs in combination with traditional progressive enhancement strategy to create applications compatible with many platforms. Because these apps work everywhere, they offer many of the features and advantages of native apps in a much smaller storage footprint. This cross-platform functionality is enormously beneficial to both users and companies alike. For companies, the upsides of PWAs include:

  • Building one app that can work on web and mobile, reducing the need for multiple engineering teams for each platform. With PWAs, there is a reduced need for a separate app for Android, iOS, and web. This can mean significant savings in development costs. 
  • PWAs can help increase web traffic and conversion rates. Apps like Twitter and Pinterest are testaments to how much difference PWAs can make for the metrics. 
  • Fast installation
  • Lower data usage

Users benefit from PWAs in many of the same ways that companies do, with a few additions:

  • Reliability 
  • High responsiveness to user interactions providing smooth scrolling.
  • Engaging - They feel like a native app on mobile devices and offer an immersive user experience.
  • No updating issues - PWA technology makes them auto-updating; no human prompting required. 
  • Lower data requirements - PWAs are designed to run smoothly in 2G environments. 

The Technical Elements of a Progressive Web Application

Progressive web applications are built on three core elements: the application shell, service worker, and the web application manifest.

Application Shell

This is the framework of the user interface that loads on the user's screen when the application is opened. The application shell allows the user to navigate and interact with the application in a manner similar to the native app. It is built to use minimal data and cache only the files necessary to run the app.

An application shell, when cached by the service worker, makes it easy to load essential components on the screen on multiple visits without connection to a network. Although not mandatory for a progressive web app, application shells provide substantial performance and speed improvements.

Service Worker

A service worker is a script that runs continuously in the background, separate from the web page, that acts as a gateway to features that don't require a web page or user interaction. The service 'worker's primary job is to manage the cache of responses. It allows the app to intercept network requests, manage multiple caches, minimize data traffic to save user-generated data online.

Web Application Manifest

A web application manifest gives information about an app in a JSON text file. It is the mechanism used by the developer to control how the app is launched and displayed to the user, and it also serves as a centralized place for the application's metadata. 

Essentially, it operates as the site's bookmark on the home screen. The manifest usually contains the starting URL, the app's long and short-form name, links to icons, and icons' sizes, type, and location. 

All three components work together to give the performance characteristic of PWAs.

Big Names Using Progressive Web Apps

Forbes

Forbes completely overhauled its approach to product innovation to respond to consumer content needs and keep up with the rapid changes in the marketplace. They called their new mobile site the first significant step in taking their storytelling capabilities to the next level while creating a faster, better, and more engaging experience for their readers. Forbes' new mobile page loads entirely in eight-tenths of a second and they say their new technology approach will facilitate between two and ten seconds of time savings with every pageview. 

Pinterest

Pinterest's PWA was developed after several years of dealing with a severely deficient web app. The company had been focusing heavily on its iOS and Android native apps while neglecting the web side. In July 2017, they made the radical decision to rebuild their web application using PWA principles. This was done to be more inclusive of users in low-bandwidth environments and with limited data plans. With more than half of all Pinterest users based outside the U.S., a first-class mobile website was critical to making Pinterest more globally accessible. Their decision was also data-driven. Before developing a PWA, their web conversion rates were abysmal. Only a tiny percentage of the unauthenticated users who landed on their mobile web site continued to either install the native app, sign up or log in.

The Washington Post

In 2016, The Washington Post unveiled a high-performance web experience that loads stories automatically and provides rich offline reading capabilities. As users engage with Post content, the app downloads content in the background allowing for frictionless, uninterrupted reading.

Uber

As Uber expands to new markets, they wanted their platform to be more inclusive so that all users, regardless of location, network speed, and their device could quickly hail a ride. They rebuilt their web client from scratch to provide an alternative to the bulkier native mobile app. M.Uber, their new PWA, is compatible with all modern browsers and offers an app-like experience for riders, even on low-end devices not supported by the native app. M.Uber takes up just 50kB of storage, allowing for fast loading even on 2G networks.

Twitter

Twitter's platform has always been about keeping up current events. Out of its 328 million monthly active users globally, over 80% engage with its mobile app. However, Twitter wanted their mobile web experience to be faster, more reliable, and more engaging. Enter, the Twitter Lite progressive web app, which incorporates the best elements of both the modern web and native features. It is now the default mobile web experience for all Twitter users. With Twitter Lite, Twitter aimed to deliver a more robust experience and increase user engagement while providing instant loading and lower data consumption. With the new PWA, Twitter saw:

  • 65% increase in pages per session
  • 75% increase in Tweets sent
  • 20% decrease in bounce rate

Starbucks

Progressive web apps have taken off in several industries, and the food industry is no different. Coffee giant Starbucks released its mobile ordering app nationwide in 2015. When considering adding online ordering functionality for their website, they opted to design a system that would be accessible in both established and emerging markets. To accomplish this, they created a progressive web application. This is because PWAs are great for areas with limited internet accessibility. Starbucks' PWA allows customers to browse the menu, customize their orders, and add items to their carts, even if they aren't online.

Potential Drawbacks of Progressive Web Applications

While progressive web applications have had enormous positive effects for companies and consumers alike, some downsides include:

  • Limited functionality 

Progressive web applications access often lack access to the device's hardware and are unable to support native features like GPS, fingerprint scanners, Bluetooth, NFC, vicinity sensors, geofencing, inter-app communications, and advanced camera controls. 

  • Limited browser support

Not all web browsers support progressive web applications. 

  • Search traffic losses due to absence from app stores

If a progressive web application is used to replace native applications completely, this may result in reduced traffic due to a lack of visibility. While a web app can redirect users to an app store, absence from the app store may not prompt users to search for a PWA. 

Future of Progressive Web Applications

By many accounts, PWAs are the future of the web. As companies invest more resources into their progressive web applications, the need for native mobile apps will decrease, allowing dedicated engineering teams to come together to support a single, outstanding product. PWAs offer a win-win situation for technology companies and consumers. They can easier to develop than native apps, and they are accessible on low-end devices that native apps do not support. In general, they also require lower data consumption, allowing consumers with limited data to enjoy the application. These characteristics can help companies expand their customer base in developing countries where high-end mobile devices and fast internet speeds are not the norms.  

Why Use Flux Tech

Flux Tech was born from a desire to provide outstanding full-stack web and mobile development services. More than merely providing development services, we offer strategic advice based on years of experience building, coding, designing, and strategizing software. At Flux Tech, we make your business our business. Your success becomes our success. Contact us today for more information about progressive web applications and our full line of technology solutions. We love chatting with you! Stay tuned to our blog for more informative content.

Comments