Everything You Need to Know About Progressive Web Apps


BEST PRACTICES SERIES

Article ImageIt almost sounds too good to be true: a means of making the mobile web experience easier for customers—wherever they are in the world—while reducing development and maintenance costs for native apps and obviating the marketing spend required to make an app stand out. But in the past 2 years, there’s been a groundswell of interest in progressive web apps (PWAs), a combination of technologies that proponents say can do all those things and more.

A PWA is a website that acts like a native mobile app. PWAs consist of three components: an app shell, which uses HTML, CSS, and JavaScript and can be cached offline; service workers, which are background JavaScript files that can handle functionality such as push notifications and offline usage on a modular basis; and an app manifest that makes it possible to install an app from a browser and pin it to a device’s homescreen.

As important as providing that app look and feel from a website—which spares users the step of downloading from an app store—is the fact that PWAs can work offline or with spotty connectivity. This is helpful in situations in which users may be constrained by storage or access issues. Because they are browser-based, the apps can be device-agnostic and provide cross-platform consistency for users moving from desktop to tablet to phone and back again.

Google gets credited with presenting the concept of a hybrid model of a responsive website and app at its 2016 I/O Conference. (Some say the PWA label, coined by designer Frances Berriman and Google Chrome engineer Alex Russell, is more accurately termed a progressive website. That particular horse left the barn months ago.)

There isn’t a businessperson in 2018 who wouldn’t wish for a better user experience at a lower cost from his or her organization’s mobile web app. Whether PWAs can really be the route to that elusive prize depends on a number of factors.

  

Mobile Market Growth and the Discoverability Challenge

The growth and importance of the mobile market are undisputed. In its “2017 U.S. Cross-Platform Future in Focus,” comScore found that mobile accounts for almost 70% of time spent with digital media in the U.S., and significant audience segments rely exclusively on mobile for internet access (for instance, 22% of women age 18–24). And users love their apps. A 2016 eMarketer study found that of the nearly 4.5 hours that users spend on mobile devices, almost 3.5 of them are on apps. So what’s the problem with native apps?

The first and most pressing issue is discoverability. There are so many apps available—2.2 million in the Apple App Store and 3.3 million in the Google Play store, as of September 2017—that creating one that will be found by enough users to generate ROI requires a significant marketing spend. Brian Cardarella, CEO and co-founder of DockYard, which helps companies design, engineer, and iterate their digital products, says, “Companies pour money into building apps, and then they realize that their marketing budget is two or three times the tech dev cost.”

That marketing budget isn’t just a one-off at launch either. It extends to the necessary promotion and marketing to remind users to continue to use the app once they’ve downloaded it. Says Gartner’s research director Charles S. Golvin, “App engagement costs are a pretty considerable investment too, which is why the cost of marketing typically dwarfs development costs.”

 

Other Limitations of Native Apps

Those development costs aren’t, by the way, insignificant—especially if you’re trying to give users a similar experience across platforms. “You almost have to build a new app for every single platform,” says Cardarella. “Clients want to build an app once and have it work everywhere. PWAs remove that user experience problem.”

Besides, finding app developers to build for multiple platforms continues to be a challenge. Randstand Technologies cited a 104% year-over-year increase in demand nationally between 2014 and 2016 for iOS, Android, HTML5, Angular, Java, and JavaScript skills. Making it possible for your existing web developers to bring their expertise to bear for mobile end users can circumvent that labor supply issue.

Native apps that gobble up storage and require connectivity have long been a thorn in the side of international customers who may have limited storage on their phone. Noting that the Facebook mobile app clocks in at almost 400MB, Max Lynch, co-founder and CEO of Ionic, which enables developers to build interactive mobile apps using HTML5 and AngularJS, says, “Can Facebook really force all its users to download a several hundred MB app? No—they’ll access it via the mobile web instead.” Organizations better hope that in that situation, the mobile web experience isn’t hindered by a slow connection; a 2016 Google study found that 53% of mobile sites are abandoned if the site takes more than 3 seconds to download.

At a time when security and privacy concerns loom larger than ever, PWAs represent an easier way to offer more secure access. Lynch says that in contrast to native apps that may require third-party technologies to create secure access, “It’s as easy to secure a PWA as securing any other web-based properties, as companies have been doing for years.”

Finally, there is some evidence that conversion rates are higher on the web than on mobile. In a recent case study of the rewrite of its mobile web experience using PWA technology, Pinterest says it went from a 1% conversion on its mobile web to core engagement levels of 60% on its PWA—due, no doubt, to the load time of mobile interactive features on the site dropping from 23 seconds to 5.6 seconds.

 

Big Brands Taking Note for Consumer Market

Other big brands such as The Washington Post and Starbucks have moved to PWAs in recent months and are achieving significant improvements in end-user experience. In September 2016, when the outdoor retailer Patagonia turned off the lights on its native app in favor of its PWA, this was its announcement to native app users: “It’s time to say goodbye. … Now that our website is beautiful and easy to use on all mobile web browsers, we will no longer be supporting this app—you can delete it from your device.”

Ola Cabs, the biggest Indian cab company, is taking note of the comparatively small footprint of a PWA versus a native app. As presented at the 2016 Google I/O Conference, Ola’s Android app was 60MB, and its iOS app was 100MB. However, its PWA was 0.2MB. Twitter’s PWA is 0.6MB, compared to 23MB-plus and 100MB-plus on Android and iOS, respectively. For lower-end devices that lack ample storage, that reduction makes a PWA significantly more appealing.

Indeed, Ola found that prior to its shift to a PWA, 20% of people who booked cab rides via the PWA had already downloaded the companion native app but then uninstalled it. By reducing the size of the app, Ola was able to re-engage with those users.

Golvin says PWAs can also address the commitment challenges that companies face with skittish customers. “The depth of connection to the brand doesn’t have to be as much with a PWA; they don’t have to make a commitment to download an app when they’re not quite ready for that connection,” he says. Then again, a well-functioning PWA may make that connection more likely in the long term.

 

 

Internal-Facing Applications Also Benefit

The promise of PWAs may be even greater when the end user is an employee, because of the way that they unify experiences across devices and legacy systems. Cardarella says, “There can be a 5- or 10-year shelf life for internal intranet-based apps, and they didn’t usually include cross-platform considerations. But now people want to access these apps via tablets and phones as well as their desktops.”

He points out that an inability to access apps across platforms can have a significant impact on productivity, giving an example of how his wife, a physician, currently interacts with a legacy medical information system in her practice. “She has to enter patient notes on a computer in her office, and if it goes down, the IT guy has to come in to the office to fix it.” Cardarella says, “If the app were to move to the web, she’s no longer tied to a physical location” and could enter patient notes from her tablet or phone wherever she happens to be. Multiply that increase in productivity and decrease in support requirement for a legacy information system, and PWAs seem to offer significant promise.

  

Limitations of PWAs

That said, PWAs aren’t a panacea. There was one major drawback at the time of this writing: Apple doesn’t fully support them yet. Golvin says, “You can build a PWA, and it will run fine on Safari and other iOS browsers, potentially offering performance improvements. But since the underlying webkit engine doesn’t support some newer web standards, iOS customers won’t get the full PWA experience.”

However, all signs point to Apple getting fully on board with PWAs and quickly. According to Cardarella, upcoming iOS point releases are rumored to include changes to enable PWAs. Golvin says, “Apple will certainly support PWAs in 2018, probably by the first half of the year. If [Apple’s lack of acceptance of PWAs] is what’s holding you back from creating one, don’t wait.”

Golvin sees a bigger PWA limitation for companies that leverage geolocation functionality, such as retailers that want to offer coupons via an app. “In that situation, a native app offers a lot of capabilities beyond what a PWA can do,” he says, “because PWAs can’t monitor proximity or do background location tracking.”

Another consideration for companies allocating development resources is whether to prioritize Accelerated Mobile Pages (AMP)—a Google-backed project designed as an open standard for any publisher to have pages load quickly on mobile devices—over development of a PWA. Lynch says, “They’re not mutually exclusive, but AMP is more of a short-term Band-Aid for what’s ultimately a developer education problem.”

Of course, if you’re one of the lucky lottery winners/savvy businesses whose native apps appear in the top search results of your app’s category in the Apple or Android store, you may not need to switch to a PWA. “The native app is still the best if the customer can find your app, will download it, and will engage with it,” says Golvin.

As with any new technology, it’s taking time for PWAs to gain steam. Cardarella says he only began hearing questions about PWAs from customers 18 months ago. “We’re still quite a bit below the peak” demand, Lynch adds. He anticipates that there will be some false starts and failures for PWAs over time. But the good news is that responsive mobile websites and native apps aren’t mutually exclusive. “It’s not an either/or situation for a native app and a PWA,” says Golvin. And it’s a great time to start experimenting.

  

Getting Started With a PWA

Here’s what not to do: Tell your developers, “Turn my website into a PWA.” Golvin says the most important thing in designing a more responsive mobile web experience is to take a big step back. “You should start with a blank slate. This should be about designing the mobile experience, not just converting your website.” Bolting on a PWA approach to a website that isn’t already working well simply makes it more likely that mobile end users will have a poor experience.

Lynch concurs and says that for digital publishers, the first question should be, “Does our current web strategy work?” If it does, but the related mobile strategy is less robust, PWAs can be a great avenue to improve mobile engagement.

Even if both your web and mobile strategy are working well, Lynch sees no reason to hold back from diving in to PWAs. “It’s still worth exploring and experimenting with the differences that PWAs can bring,” he says. There’s nothing to gain but a better website experience for the growing segment of your audience that is on the move.

 


Related Articles

Digital publishers eager to reach more eyeballs often turn to external distribution platforms to disseminate content to the masses. But new research reveals that this strategy may not be paying off as effectively as digital content providers have banked on.
Here's a worrisome thought for marketers that can keep you up at night: Gen Z—a key demographic born between the mid-1990s and early 2000s—comprises 27% of the global population, commands $44 billion in purchasing power, and represents the first true generation of digital natives. But your efforts to reach them via digital ads could fail miserably, new research suggests.
GDPR creates a new set of standardized, strict rules for consumer protection, designed to ensure privacy and data minimization. It's a regulation with reach; just about any global company that collects or processes data for customers based in the EU will be affected. The consequences for non-compliance are not trivial; GDPR stipulates that offending companies can be fined up to 4% of annual global turnover, or €20 million (about $24 million), whichever is higher.
While AWD offers several advantages over waterfall and other methodologies, it has its limitations too. Whether you're preparing to take your first iterative plunge or want to improve your familiar AWD processes, it's important to analyze agile's capabilities and limitations and pursue strategies that can produce better results on the web for you and your audience.