From navigation and shopping, to news and entertainment, mobile apps fuel our daily lives.

Between them, Google’s Play Store and Apple’s App Store are set to provide millions of apps to over 11.6 billion mobile devices by 2020. As far as the masses are concerned, the current model works perfectly. Apps are easily accessible, affordable and manageable. It all runs like clockwork — so there’s no need for further innovation, right?

Well, let’s just say the digital age isn’t famous for long periods of stagnation. Enter, the Progressive Web App (PWA).

What Is A Progressive Web App?

In 2015, Google developers Alex Russell and Frances Berriman coined the term “Progressive Web App.”

The concept was simple:

Instead of users downloading their apps through app stores, progressive web apps are available through the user's web browser, just like a website. While that may seem like a step backward for the mighty mobile app, Russell insists that progressive web apps are, “websites that took all the right vitamins.”

Essentially, a PWA is a hybrid between a traditional web page and a traditional mobile app. By leveraging modern web technologies that we will come to discuss, a PWA delivers an app-like experience, without the need for an intermediary between the developer and the user.

"Users don’t have to make a heavyweight choice up-front and don’t implicitly sign up for something dangerous just by clicking on a [download] link." Russell wrote. "Sites that want to send you notifications or be on your home screen have to earn that right over time as you use them more and more. They progressively become 'apps',” he continued.

So, users get an app-like experience without needing to download anything, while brands and developers can bypass the lengthy list of restrictions, the long waits and the heavy costs commonly associated with launching an app through a third-party app store.

To throw further clout behind this Google project, Apple is supporting the movement with Safari support for PWAs, plus Microsoft is also getting in on the action.

What are the characteristics of a PWA?

While there are endless traits you can attribute to PWAs (security, discoverability, etc.), there are 3 core features on the technical side that are at the heart of PWAs.

1. Web App Manifest
   • The web app manifest is a JSON file that allows developer to control how and where the bookmark for the PWA appears on a user’s device. Web App Manifest allows the user to experience everything from a unique icon for brand identification, a “waiting” display while the PWA opens up, and default display characteristics for while site resources become available to ensure a seamless transition for the user.
2. Service Worker
   • The main uses for a Service Worker are to handle network requests, handle push messaging, store content for offline use, and to update assets on the server. A Service Worker is essentially a Javascript file run by the browser in the background, apart from your webpage, and controls any events fired by the browser or webpage.
3. Cache API
   • A Cache API is a system for holding network requests and their respective responses for retrieval at a later date.

Outside of that, not only are Progressive Web Apps secure because they’re served through TLS connections, they’re also known for responsive functionality. Pages adjust to your screen size or device type.

Mobile-friendly websites are responsive also. However, developers have been shutting down their mobile sites for not being able to deliver a rich and engaging user experience. As a workaround, they’d send users to download an app in the store, thus interrupting the user’s interaction with the content. By comparison,Progressive Web Apps create an app-like environment, contained within the browser, which solves this problem. Progressive Web Apps don’t require a visit to the app store. The user can download the PWA straight to the phone’s home screen for an easy install. Potentially one of the greatest PWA features is that the user stays locked in to the content on their browser and in turn, gets wrapped up in an experience without interruption, especially with the use of an application shell.

Because of traits such as the responsive app-like experience, Progressive Web Apps (PWAs) are being called the future of web development by sources across the web. The hype around PWAs have in turn limited conversations about negative PWS characteristics. Just a heads up, they exist too. With more companies creating Progressive Web Apps, social media announcements take more effort to create engagement. Create a PWA sooner than later to receive the best bang for your buck on the social response front.

And as you can guess, there’s a few key differences between PWAs vs Native Mobile Apps you should know about too. We’ll address those later.

Benefits of Progressive Web Apps 

The number one benefit of a progressive web app is that it takes the power from third-parties like Apple and Google and gives it directly to the brands and developers who want to innovate on their own terms. That’s because PWAs are:

• Easier to Launch: Because they can be built alongside a website (using the same WCMS), PWAs require less work because developers don't have to comply with Apple, Microsoft or Android app regulations, nor do they need to wait for approval before the app goes live.
• Easier To Update: With native mobile apps, developers must also submit their updates to the respective app store for approval. With multiple mobile operating systems in play today, developers often encounter serious issues with duplication of effort. With a PWA, everything is under the same roof, and updates can go live without external approval.
• Easier to Access: For users, a PWA can be accessed just as quickly as any website — or perhaps even faster. That means they don't have to download anything from the app store to access the app, and yet, they can still save PWAs to their home screens for rapid app launches.
• Search Engine Optimized: Native mobile applications can’t be found via Google, Bing or DuckDuckGo. Users will only be able to find the app listed in an app store, with a download link waiting for them. A PWA on the other hand can be search engine optimized just like a website, giving desktop users a quick, easy and familiar route to their favorite apps.
• Faster: PWAs are often faster than Native mobile applications thanks to the technologies used to build them. All stylesheets and content gets cached separately from the rest of the brand’s website, which means only raw data is loaded for the user.
• Offline Mode: Like many traditional mobile apps, PWAs can work offline. Brands can display offline product cataloges and content to keep users engaged until their connection is back up and running.
• Push Notifications: Brands don’t have to compromise on engagement when they launch PWAs, because push notifications can keep doing the job of reeling users back in.

All in all, anything a traditional mobile app can do, a progressive web app can do better — and then some.

How Does a Progressive Web App Work?

In many ways, a PWA works similarly to a standard website in that it employs two layers: a presentation layer and a content layer.

The presentation layer, also known as the “app shell”, dictates how the PWA will display the content. The app shell uses a combination of HTML and CSS, much like a standard web page, to structure the layout of the content for the user's browser and give it the look and feel of a native app.

The content layer holds content such as text, blog posts, weather forecasts, and so forth. A special JavaScript file known as a “service worker” connects the app shell and the content layer, manages user requests, and sends push notifications. The service worker can also cache requests as previously mentioned, which allows the PWA to process user requests much faster, as well as allowing users to access requests when offline.

They’re Already Here: 3 Active Progressive Web App Examples

PWAs don’t represent the future of applications — they represent the present.

Since much of the technology for building PWAs has been established for the better part of two decades (Good old HTML, CSS and JavaScript), developers and marketers have already leapt at the chance to take back control of their app development process and app-based customer experiences. As a result, we’re already seeing major brands leading the way with PWA alternatives for a number of apps we all know and love.

1. “Twitter Lite”

When the staff at Twitter wanted a faster, more engaging and more reliable way to deliver content, they turned to PWAs. The Twitter Lite Progressive Web App became the default mobile web experience for all users globally in April 2017. Twitter developed the PWA with the goals of decreasing bounce rate and data consumption, while increasing Tweets sent and pages viewed per session.

According to Nicolas Gallagher, the Engineering Lead for Twitter Lite, "Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3 percent of the device storage space compared to Twitter for Android."

2. Washington Post PWA

In May 2016, the Washington Post was among the first publications to launch its own PWA. A comparison of load times conducted in October 2016 showed that the PWA loaded a usable page in just over 3.2 seconds, while the original mobile site took over a minute to load the same article page.

“Readers want instant load times," said Shailesh Prakash, Chief Product and Technology Officer for The Washington Post, "and the combination of Google’s AMP and Progressive Web App technologies allows us to offer a game-changing experience for the mobile web.”

3. AliExpress PWA

AliExpress, an online retailer and subsidiary of the Chinese company Alibaba, attempted to channel its website visitors toward downloading its mobile app. However, users hesitated to download the app, while those who did found it difficult to use.

In 2016, AliExpress launched its own progressive web app in an effort to re-engage users and boost its sales. A subsequent case study found that the number of pages visited per session per user across all browsers more than doubled with the PWA vs. the mobile site, while the conversion rate for new users increased by 82 percent for iOS users and 104 percent across all browsers.

Lijun Chen, director of AliExpress Mobile Team, said that the company saw "huge benefits on browsers that support the latest features, [and] we also got to see a bump across (all browsers)."

"That is the sign of a great investment," Chen said, "and one that will keep paying for itself as browsers evolve."

When should you build a PWA? 

1. If You Prefer an Uninterrupted Experience Online & Offline

Currently, brands have content on their website, and through a headless CMS, they can send that content to a native mobile app. But with a progressive web app, publishers can build one website, without having to build separate applications for iOS, Android and Microsoft. The service workers do the heavy lifting, and all content stays under the same digital roof. Suddenly, publishers are spending less time and money on building applications and meeting regulations, and instead, are producing more quality content. When users have flaky internet connection, they can still access your content on progressive web apps. Even better, your users can access your web app without internet connectivity at all.

2. When Same Users Are Consistently Returning

The only time an app tends to remain on a device is when a user plans on coming back a few times. For that reason alone, progressive web apps make the most sense for case scenarios where users return often.

3. When You Are Attempting to Future Proof Content

In essence, with a headless WCMS in place, a progressive web app simply helps to enforce the process of future-proofing content. That’s because there’s no middle man to rely on — meaning brands no longer have to worry about app store user experiences compromising download rates, nor do they have to worry about competing operating systems entering the market to provide them with another set of app-publishing obstacles. With a PWA, everything is in-house, and everything is under control.

At the same time, brands can bypass installation processes while reaping the usual benefits of push notifications to keep readers coming back. For any publisher, a PWA is a perfect upgrade on native mobile applications. At Zesty.io, we have worked with clients ranging from Astroglide to Hofbrauhaus in developing their websites and mobile applications, and every client we speak to is excited about the potential of PWAs.

4. When Your Website Is App-like Already

For sites that already provide users with an app-like experience, going the progressive web app route is only going to improve the user’s interaction with your content. Make the jump over and your users going to experience an amplified experience and they can take their journey with your PWA offline.

5. If Cross-browser Support Doesn’t Scare You

While Chrome, Samsung, Firefox, and a few of the little guys have been supporting progressive web apps, Apple has been hesitant to jump on board. That is, until recently. Developers have only just begun the conversation around Safari adding features to support PWAs. Service Workers are the core feature being discussed for now. No word yet on Web App Manifest, but in a recent Safari Technology Preview, Review 51, users can at least note progress being made on Safari’s end regarding Service Workers. Based off the update in Review 51 Safari Technology Preview has fixed the ability to download resources from Service Workers.

What is Progressive Enhancement?

Progressive enhancement is a way of boosting your set of features on your current or future web app. Whether you have a web app built off older technology supporting old browsers, a current and modern web app in need of some sprucing up, or a new app project ready to be built, there’s room to enhance your web app using features of progressive web apps. A web app already built doesn’t need the full list of PWA features, you can pick a couple that make the most sense. Maybe it’s push notifications, adding the offline cache manifest, or maybe your app is in need of basic caching. Regardless, you’ll get the benefits of enhancing your web app on the browsers that support those features and on the browsers that don’t, your user experience will go unchanged.

When to Update Progressive Web Apps

So yes, you can add features but when do you know when to update progressive web apps? The simple answer - whenever the developer feels it’s necessary. Since there’s no restriction on updates like there are in the play store, you still don’t want frequent updates. To keep the user engagement with your progressive web apps seamless, you’ll want to alert the user to update the app at their own pace. Heavy warning though! Too many update alerts might have a negative impact, so update your progressive web app with your user’s preference in mind. 

PWAs vs Native Mobile Apps

Let’s discuss a few of the commonalities and differences between PWAs and native mobile apps to help you decide which to use.

What are the similarities of progressive web apps and native mobile apps?

• Push Notifications
• Potentially Work Offline
• Home Screen Icons Increase Return Rate
• Full Screen
• Access to Native Device Features
• Leverage Operating System
• Splash Screen

What’s the difference between a PWA and Native app?

• A PWA can be experienced and downloaded in Chrome and other browsers, whereas Native apps must be downloaded from an app store.
• With Native apps you must learn two different languages: iOS and Android. In a PWA you can use your preferred web application language.
• Native apps are fully functional on ios and android, whereas features are limited on iOS for a PWA… for now
• Larger reach on mobile web
• SEO - PWAs can be indexed on search engines to increase traffic

In 2017, aU.S. mobile app report stated that users spend 16x more time on their native mobile apps than on mobile web. That being said, native apps collectively saw 7 million unique monthly visitors, whereas mobile web saw 15.7 million unique monthly visitors. The reason that native apps tend to see more engagement is because of the ease of access, user experience, and features like push notifications that bring them back in. Progressive mobile apps have all those qualities that bring high engagement, plus the reach capable of being built around a website.

The future of PWAs

For now, most consumers are still downloading their apps from app stores. For there to be a considerable shift towards consumers downloading apps straight from the web itself, enterprises must create consumer demand centred progressive web apps. Starbucks, Twitter, Uber, and more have showed promise this will happen. Take a look at Microsoft Windows 10 PWAs. Progressive web apps have become more compelling, even Apple has gotten to work supporting service workers with some major changes this year. Tech trend enthusiasts can and should expect PWAs to grow dramatically. Will they take over app stores? What do you think the future of apps are?