What Are Progressive Web Apps (PWAs)?

Understanding Progressive Web Apps (PWA) and How They Can Help Your Business

Progressive web apps are getting a lot of buzz, but what does that mean for you? Are they the future of mobile interaction? Can they help your business? Our progressive web app client guide will help to answer these questions and more.

What are progressive web apps?

Progressive web apps, or PWAs, are an innovation in the mobile web world that seeks to combine the best features of native mobile apps and the mobile web.A progressive web app is not exactly a native app, nor is it exactly a mobile-friendly version of your company’s website. It lives somewhere in between.

Web apps (creating an icon that launches a website) have been around for a while, but for a web app to qualify as progressive (in other words, as a PWA), it needs to take advantage of several next-generation technologies.

The progressive web app experience looks different on the two major mobile operating systems, and we’ll discuss that below. At a high level, though, the features necessary to be considered a progressive web app include the following:

• Pages are responsive on tablets and phones

• URLs can load at least some content while offline

• The user can be prompted to add the PWA to the home screen (accomplished using metadata)

• App can load under 10 seconds under 3G conditions

• Cross-browser functionality

• Each page has a URL

(Full disclosure: not everyone on the internet agrees on what characteristics a PWA must-have. But this list comes from Google, who codified a framework for PWA back in 2015. Since they were involved early on, we’ll take their word on this.)

In practice, three of the most important progressive web app characteristics are these:

• App-like: the experience should feel more like an app than a website

• Secure: all PWA pages should be delivered using HTTPS protocol

• Connectivity-agnostic: Some offline functionality means no 404-not-found messages under low or no connectivity

Google gives many more traits that an “exemplary” PWA will possess, such as ability to be indexed by Google, availability of social metadata, and ensuring inputs aren’t covered up by the onscreen keyboard.

Note that this list is longer and takes a pretty deep dive, so we’ll let you check it out here if you’re interested. Of course, when you hire a firm like ours to build your progressive web app, you won’t have to worry about this level of detail, because we’ll take care of it for you.

Why use a progressive web app over a mobile website or native app (or both)?

This is a great question. There is no one-size-fits-all approach to deciding on the best mobile offering for your business. Some businesses will do well to have a native app. If you already have a fully functioning native app that does everything your customers want it to, that’s great. We’re not suggesting you necessarily need to delete it in favor of a PWA.

Similarly, there is nothing inherently wrong with a well-designed responsive mobile website. You need this, no question. The question is whether your mobile website should be designed in such a way that it can also function as a progressive web app.

But native apps aren’t the right solution every time. For one, app coding and web development are completely different languages. Many developers aren’t skilled equally in both. A team with deep web development skills can easily pivot to create a PWA, but they may not have the skills to build a good native app.

Further, there are many businesses that currently offer a lackluster or limited mobile website or a native app with very limited functionality. If users aren’t getting what they need from your app or your website, you’re missing out on conversion opportunities. In situations like this, a progressive web app may be the perfect solution.

Of course, if your industry or business sees the value in some of the telltale features of PWAs, such as ability to load basic content even when offline or having your content indexed by Google, then the choice is clear: You should invest in a progressive web app.

A case study

Implementing a progressive web app can create real results for most businesses. But don’t just take our word for it. Google has a number of case studies available that show concrete, real-world results of implementing a PWA. One company, George.com, saw a 31% increase in mobile conversion after turning their site into a progressive web app. They also saw page load time drop drastically (3.8 times faster) and kept customers on the site 28% longer.

Check out Google’s entire library of case studies.

How do progressive web apps work?

As mentioned above, there are significant differences between how progressive web apps work on Android and iOS. Since Google more or less invented this platform, it’s not hard to believe that their Android operating system integrates progressive web apps in a much deeper way than iOS does. In the two sections below, we will examine some of the major differences and how the two mobile OSes handle progressive web apps.

Android

Users on the Android platform will get the best experience out of a progressive web app, since the operating system allows for implementation of some of the more advanced PWA features. On Android, progressive web apps can launch into a browser tab, but they can also do much more. They can be coded to launch as independent, full-screen instances of the Chrome browser. Further, developers have control over whether the Chrome menu and URL bar occur, and developers can even specify that the on-screen soft keys be disabled or hidden.

Using these advanced functions, PWAs can look like full-screen, standalone native apps. The elegance of this system on Android doesn’t stop there. When users visit a mobile website that offers a progressive web app, they can even be prompted to install the web app through a pop-up prompt. Developers have control over the icon and the PWA app theme and background color, as well.

iOS

Progressive web apps on iOS are limited in their functionality compared to the functionality found on Android. In iOS, users can install a web app to their home screen. When users click the app icon, it will launch the associated URL in Safari. Users of iOS devices can still gain many of the benefits of progressive web apps, but they will all occur as a tab within Safari, and users will likely be conscious of this fact. As of iOS 13 and iPadOS 13 (released in fall 2019), there is no functionality for launching Pprogressive web apps in dedicated windows like there is in Android.

How do users install PWAs?

To install a progressive web app, users start by visiting your mobile site. After that, the process differs depending on your operating system.

Installing a progressive web app on Android

Android users will receive an installation prompt when they meet certain conditions while visiting your mobile site. If your site is set up properly, when a visitor returns to your site for a second time, the site will provide a prompt asking if they want to install a web app to their home screen. To make this work, your web app must have a valid web app manifest file, be using HTTP protocols, and utilize a service worker that is both registered and valid. But again, you shouldn’t need to worry about those details. Let us handle them for you.

Installing a progressive web app on iOS

Installing a progressive web app on iOS is simple, though not particularly intuitive. First, users should open the website in Safari. Next, they choose the Share button. Next, they click Add to Home Screen, followed by Add. Users can then change the name, which is a good idea if they also use the company’s native app.

Users will now have the PWA installed on their desktop. It will look and act like a regular app icon, and clicking it will launch the PWA in a new Safari tab.

Note that iOS users running iOS 11 may need to enable Service Workers in the Experimental Webkit Features section of Safari’s settings. In iOS 12 and newer, this is no longer considered an experimental feature and is on by default.

Will progressive web apps replace native apps?

This is another great question. For now, the App Store and the Google Play Store are fairly well entrenched, and we don’t see that changing anytime soon. Games, for example, aren’t going to transition to progressive web apps. Additionally, the limitations currently in place for iOS users are real. If your business needs to offer a mobile functionality that’s not yet possible in a progressive web app on iOS, then it might not be time to make the switch quite yet.

That said, many businesses should take a long, hard look at the functionality that is offered in their app or apps and evaluate whether that functionality can be offered better through a progressive web app. The never-ending quest of keeping up with operating system updates can make native app development a challenge, and this challenge disappears entirely for businesses that transition to progressive web apps.

Still not sure whether the move to progressive web apps is right for your business? We can help with creating custom software solutions and can help with the decision-making process. Contact us for a free consultation.