Progressive Web Apps (PWAs): Definition, How They Work, and Why You Need One?

Progressive Web Apps (PWAs) are finally positioned to move from a peripheral technology to an approach that’s here to stay. By now, you’ve likely heard of them, as PWAs have quietly been making their way into the forefront of the mobile-web scene for a few years. But, more recently, there have been a slew of updates indicating that this year may be the time when PWAs step into the spotlight.

This article is an overview, or guide—if you will, that explores everything about progressive web apps: From what they are and why you should build one, to the benefits and challenges of creating a PWA, to some use cases and resources you may need to get started. Feel free to use the table of contents to skip ahead or jump around to the sections you care about most!

However, before we dig into the landscape of PWAs and why you might want to build one, let’s first define what a progressive web app is…

What is the Definition of Progressive Web App (PWA)?

First, let’s just say there’s no precise definition for a PWA, as it’s more of a concept than an actual “technology.” That said, the concept is pretty simple: It’s a browser-based web application created using the latest web technologies to deliver a native app-like experience to users on any device or channel—mobile, desktop, or, of course, the web. This concept isn’t new, but something that has been in the works for years, progressively (no pun intended) getting better as the web evolves into an even more powerful platform.

The best practices that are used to build PWAs make it possible to run these browser-based web applications anywhere and have officially grown in popularity to give native-mobile apps a run for their money. Why? Because as web technology has become more capable, it’s now possible to build once, run everywhere, and get the same level of performance across devices without having to code apps natively for each device. For example, PWAs are able to support offline or low-bandwidth operation using service workers, can easily integrate with device features, like notifications, and are also able to be pinned to a user’s home screen to function as a real application instead of just a website.

This concept is especially intriguing to brands, large and small, who are looking for fast, inexpensive ways to tackle the idea of digital transformation. For the past several years, being “mobile-first” has been a priority for organizations, but with a growing set of devices and new channels emerging frequently, it can be difficult to keep up with building natively for each of these outlets. That’s why companies like Twitter, Starbucks, Forbes, and Pinterest, have invested in PWAs, seeing an increase in brand discoverability, engagement, usability, and so much more.

Now that you understand a little more about progressive web apps, let’s dig into the recent history of PWAs and their growing popularity, understand how PWAs can help companies tackle their development backlog, and explore a few use cases and resources to get you started these apps.

The Landscape: Progressive Web Apps

The consistent surge in popularity for PWAs can be attributed to a few factors. First, 2018 was an important year for PWAs with Google and Microsoft heavily backing this type of technology with the release of Chrome 70 and Windows 10, among other web browser updates that helped PWAs become “first-class citizens” in their world. Additionally, Apple, which had been a long-time barrier to PWAs hitting the mainstream by foregoing support of them in its App Store, released support in iOS 11.3 and subsequent updates to make PWAs installable apps without any App Store approval needed.

And, it’s not just the industry giants that have helped PWAs grow in popularity, but improving web technology itself and the developers that know it best. As our CEO, Max Lynch, mentioned in an interview with App Developer Magazine, last year:

“The surge in PWAs can largely be attributed to web developers wanting to build web applications for mobile. Many web developers were on the sidelines of the mobile revolution, unable to participate due to an incompatible skillset. With Progressive Web Apps, these developers can apply the same technology they’ve been using for decades to mobile, and the prospects of that are incredibly enticing for web developers.”

Max Lynch, Co-Founder and CEO, Ionic

He continues, adding an important point, “...Teams want more control over their app development lifecycle. Instead of having to go through gatekeepers to release and update apps, teams want to deploy and update on their own schedule, which Progressive Web Apps allow them to do.”

So, by now you hopefully have a good understanding of a basic PWA and some thoughts behind their surge in popularity. Now, let’s talk about why you or your business would want to build one.

Why You Should Consider a PWA

There are many reasons to consider building a PWA for your business. To understand “the why” let’s first look at some stats that help us better understand the digital landscape as it exists today.

• Less than two years ago, TechCrunch reported that the majority of U.S. consumers (51 percent) downloaded zero apps per month.
• According to Kissmetrics, almost half (47 percent) of consumers expect a page to load in two seconds or less, and 40 percent of consumers will abandon a website that takes more than three seconds to load
• Search traffic from mobile increased to 63 percent of all traffic last year, according to Stone Temple
• Gartner predicted in 2017 that by 2020 half of consumer-facing apps would be Progressive Web Apps.

What do these stats tell us? First, that there is growing app fatigue from consumers. So, any app that a user downloads needs to take up little space and provide critical information or an unparalleled experience. Second, load times for websites and digital experiences need to be fast and remove friction, or consumers will bounce. Third, mobile devices are dominating search, making it important for companies to have more than just functional websites, but sites with great, built-in UI no matter which device it appears on.

How do Progressive Web Apps work to solve these emerging problems and more?

PWAs are fast

According to a recent Google presentation, PWAs have a <1 second median load time, making them 4x faster with 10x less data. More than that, PWAs can work offline and in low-bandwidth environments, meaning more users and devices can enjoy the speed of PWAs without losing the quality of an experience.

PWAs are cost-effective

Because PWAs are device-agnostic, companies can invest in building one stellar web experience, which can then be packaged and deployed across channels and devices at a lower cost. This saves businesses time and money that, previously, might have been used to build native digital experiences separately for each device.

PWAs are easily discoverable

As consumers increasingly use mobile to search for brand information and experiences, PWAs lend themselves nicely to this trend. Because PWAs are built on the web, this means that the web indexes all of the content associated within this type of app, making companies with PWAs more searchable and discoverable while also contributing positively to SEO. Additionally, with growing support for PWAs they can now be easily installed on a device home screen, making them easier to find and download than traditional apps within an app store.

An excuse that’s often given when comparing the web versus building natively is the disparity in performance. But, as the web has evolved over the years into a more powerful platform, this gap has begun to close. As aforementioned, offline support, access to push notifications, lightweight ability to add to home screen, and more, give PWAs the power to meet the demands for native-like experiences without the cost and time it takes to build a native app.

While there are still use cases for building apps natively, for many companies trying to keep up with digital transformation efforts, progressive web apps make it faster, easier, and less expensive to do so. But no technology is without its challenges, so let’s explore those before we dive into PWA’s full range of benefits.

Brody Kidd, sales director at Ionic and Max Lynch, co-founder and CEO at Ionic, discuss why PWAs offer an exciting way to build and manage enterprise-grade apps.

Connect with an Ionic App Strategist to learn more >

Ionic Developer Survey Results: PWAs Offer Cross-Platform Efficiency and More

Late last year, Ionic conducted a survey with some questions dedicated to progressive web apps. You can view the full set of results for more info, but here are a few interesting tidbits about how developers think about and plan to implement PWAs:

• 61 percent of developers surveyed said they have built a PWA or plan to in the next year
• 72 percent of these projects are for brand new PWAs with 28 percent being updates to existing apps to include PWA functionality
• And, 42 percent of those surveyed reported that the PWA they were building will also exist as native app available in app stores (36 percent answered “maybe” to the same question and just 22 percent shared that the PWAs they build will only exist on the web)

So what do these results mean? Here are a few takeaways we collected:

• PWAs, for the majority of those surveyed, are viewed as complementing, not replacing, native mobile apps (yet!)
• The most popular reason listed for building PWAs is the desire for better “cross-platform efficiency” with the second most popular reason being to improve the mobile-web experience by distributing apps directly to users and circumventing the app store
• The biggest gain for teams that implemented a PWA was the ease of management and maintenance of the app, exemplifying the ease-of-use and overall productivity of PWAs.

Still trying to evaluate whether to go native, PWA, or both? We recently wrote an article that explores this question—Take a read to find out which answer best suits your needs!

What Are the Challenges for PWAs?

While, of course, there are many benefits to building a PWA, there are still a few issues that remain to be worked out when choosing this approach. Here are a few to keep in mind if you’re considering a progressive web app:

Missing out on app store traffic (but not for long)

As PWAs grow in popularity, there’s an expectation that this won’t be a challenge for long: But, currently, in the Apple App Store, PWAs are not seen as first-class citizens. More than that, the user experience to add a PWA to iOS is still not completely frictionless, requiring two clicks to “add to home screen,” instead of one click, as on Windows and Android devices. However, Chrome 72 for Android just made it possible for PWAs to published in the Google Play store, indicating that there is some movement towards this being less of a problem for PWAs in the future.

Key engagement features are not available on all devices

There are still limitations to what features can be accessed by the web platform on native devices. For example, while GPS and Camera are available via PWAs, fingerprint ID and sensors are not (yet) accessible. Similarly to the above argument, it’s possible that as the buy-in for PWAs increases and web technology continues to improve, there will be access to more device features in the future. In the meantime, Ionic is one solution that can help overcome this issue through its open source UI toolkit, which uses web technology to add native-like features to any kind of app.

There is still a knowledge-gap

While PWAs have clearly increased in popularity, there is still a need for educating developers and users alike on how best to leverage a PWA. For developers, there is still a level of knowledge around performance, caching, networking, and more required to implement a PWA. Luckily, there are a lot of existing PWA resources and toolkits that can help developers get started. On the user side, there is still a lack of familiarity with what a Progressive Web App is and how it works, e.g. adding a website as an app on the home screen (especially on iOS), enabling push notifications on different devices, not closing out of websites that may ask to be installed as an app. That said, this familiarity is already changing with brands like Pinterest, Tinder, Washington Post, and more moving their sites to PWAs to benefit their business and also increase visibility for PWAs among users.

What Are the Benefits of Progressive Web Apps?

While there are a handful of challenges when it comes to implementing PWAs, it’s also clear that many of the current issues for PWAs could likely be overcome with the passing of time, increasing familiarity, the right tools, and the evolution of the web into an even more powerful platform.

Additionally, there are also a slew of benefits in building PWAs that heavily outweigh the current cons, so let’s dive in to see what they are:

Responsive. PWAs can fit any type of form factor—desktop, tablet, mobile, and any new technologies to come—responding quickly to user interactions, such as scrolling or animation, seamlessly.

Fast. Progressive web apps are lighter apps, allowing them to load quickly while still providing the quality and functionality needed, no matter the network speed or connection. Need an example? Test out mobile.twitter.com versus its native app to see which loads faster on your device.

Affordable. Because PWAs work on any channel or device with native-like functionality, building a PWA can reduce overhead for businesses by allowing them to write one experience and deploy it anywhere. This allows companies to spend less than they would if they had to write for and support multiple codebases for each device, which can be resource, budget, and time intensive.

Discoverable. Users that become aware of your PWA can easily search and discover it via any search engine.

Fresh. PWAs help you avoid app store hassles, allowing you to easily deploy quick changes and updates directly to your app without having to navigate approvals.

Installable. Popup notifications on certain websites, as well as new device functionality, makes it possible to install PWAs with one click (or two if you’re Apple 😜). Additionally, PWAs are lighter weight than native apps, taking up little space on devices.

SEO-friendly. Because PWAs are websites, every piece of content within the app is indexed and impacts your SEO. With the majority of searches being conducted on mobile devices, a PWA can more heavily impact your SEO optimization than a native app.

Engaging. With access to device functionality like push notifications, PWAs can now directly engage the user, when previously this was a native-app only feature.

Reliable. No matter the device, network connection, or memory size, PWAs can flex to work across a number of circumstances to still provide a good user experience, including offline support.

Secure. PWAs are served using HTTPS to ensure that the app and its content is always secure.

Shareable. Unlike apps on the app store, which don’t have easily shareable links, PWAs will always have a link associated, making them easy to market and share across channels with a simple link.

Native-like. Because of the app shell model, PWAs now look and feel like an app on any device with native-like interactions and navigation.

Developer-friendly. To build a PWA, developers only need to master the most popular languages: HTML, CSS, and Javascript. Given that web developers are the most common type of developer, companies and individuals alike can leverage existing skills to build highly-performant apps that run on any device, without the need for learning a device-specific language, like objective-C for iOS or Java for Android.

--

With the number of benefits above, it’s difficult to find a sound argument against PWAs as they have provided a necessary bridge for the gap between the reach of the web and the accessibility of mobile, creating the best of both worlds.

Being mobile-first is still a priority for many companies, while also trying to keep up with the evolving landscape of channels and devices—Something that likely to become even more complicated over time. So, for companies seeking a solution to not just reach, but also engage customers across any and all devices, Progressive Web Apps provide a solution that could efficiently replace a company’s native app, mobile site, and even desktop site. The possibilities are endless, but before we conclude, let’s see how Progressive Web Apps are being implemented today.

Progressive Web Apps Examples

As mentioned previously, there are a number of brands, big and small, that are investing in PWAs and already seeing major payoffs. Here are just a few of the Progressive Web Apps examples we’ve aggregated:

Forbes

Forbes, a popular news website, wanted to optimize their site into a progressive web app to improve the user experience. According to their case study, here are some of wins that ensued after converting to a PWA:

• 43 percent increase in sessions per user
• 20 percent increase in ad viewability
• 3x in scroll depth
• 100 percent higher engagement

Flipkart

After nearly 60 percent of users uninstalled Flipkart’s (India’s largest e-commerce site) app on their phones to save space, the company decided to take a different approach. By combining their native app and web presence into a progressive web app, Flipkart was able to increase its conversions by 70 percent (after they added the PWA to their home screen). The company also saw:

• 3x more time spent on site
• 40 percent higher re-engagement rate
• Time on site increase to 3.5 minutes from 70 seconds

Tinder

Popular dating app, Tinder, also built a progressive web app in 2017 and saw a number of improvements in engagement and load times. According to the linked case study, here are some preliminary signs of how the PWA impacted Tinder’s app performance:

• Increased swiping on PWA versus native app
• More messages sent on PWA versus native app
• Increased editing of profiles via the PWA versus native app
• Longer session times on PWA than the native app

Additionally, PWA Stats reported that Tinder was able to:

• Cut load times from 11.91 seconds on its native app to 4.69 seconds on its PWA
• Plus, its PWA was 90 percent smaller than the native Android Tinder app

Twitter

The social media giant tested out launching a progressive web app of its site in 2017 called Twitter Lite. This version of Twitter saw a:

• 75 percent increase in tweets
• 65 percent increase in pages per session
• 20 percent decrease in bounce rate
• And, the app loaded in under three seconds even on slow networks

Alibaba

The world’s largest online B2B trading platform, Alibaba, built a progressive web app recently and saw the following results:

• 76 percent higher conversions across browsers
• 4x the interaction rate after users added the PWA to home screen
• 30 percent more monthly active users on Android and 14 percent more on iOS

These are just a few of the many preliminary metrics starting to pop up around PWAs, more of which you can explore on two popular sites dedicated to PWA performance, PWA Stats and Google’s web developer showcase.

Related to the growing adoption of PWAs is a quote from our CEO, Max Lynch, who said in an interview:

“I believe we’re going to see a complete flip for Business to Employee (B2E) apps being built as PWAs. Most B2E apps have no reason to be built and deployed using the native app toolchain; doing so only adds overhead and slows teams down. Since most of those apps are data-driven business apps, they are perfect candidates for PWAs. On the consumer side, the data shows that, on net, users aren’t downloading and keeping apps. Many businesses will have no choice if they want to reach and retain users but to lower the barrier to using their app by building a PWA.”

Max Lynch, Co-Founder and CEO, Ionic

And, per all that we’ve explored above, this prediction seems aligned with the direction that PWAs are going in market.

How Can Ionic Help with Your PWA?

Now that we’ve explored the landscape of PWAs, let’s talk about how Ionic can help.

Not to brag, but give us a little leeway here because we’re proud: From its inception, Ionic has bet on the web. Meaning, we understood the power of web technology early enough to bet on it as a viable platform for building reliable, native-like mobile apps. And we’ve been able to do so, amassing 5M+ users of our open source technology to build powerful cross-platform apps with the web.

Additionally, with our most recent release of Ionic Framework 4.0, our technology is now built on open web standards, using lightweight web components to make it even easier to leverage a customizable UI library—no matter your front end framework—to build progressive web apps.

Ionic’s goal has always been to give web developers the tools they need to build performant applications for any device. Our UI toolkit was created to work anywhere, from PWAs to a native app context in any app store. More than that, we’ve worked on a number of pre-designed and reusable app experiences that function across all browsers, support PWAs, and scale from mobile to desktop.

It’s clear with our experience harnessing the web as a platform to build not just mobile apps, but apps for any device or channel, we have the tools and resources you need to get started with progressive web apps.

Can’t wait to begin? Connect with an Ionic App Strategist and dig into some resources to learn more and start building a PWA:

• PWA Resource Page: Discover more information about PWAs, plus dive into basic tutorials to begin building a progressive web app.
• Whitepaper: The Architect’s Guide to PWAs: Get practical insights on which projects are right for PWAs and how to get started building a PWA today.
• 2018 Ionic Developer Survey: Key insights from our annual developer survey, with an entire section dedicated to PWAs due to their growing popularity this past year
• PWA Toolkit: Build lightning fast PWAs with no config needed and best practices already built-in, so you can go from zero to production-ready with Ionic.

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.