Interested in building a progressive web app? This guide is going to tell you all you need to know along with 50 examples of the best PWAs on the market!

For years weve been preaching non-stop: you need a native app. There were good reasons for that, and we still stand by it. 

Table of Contents

Native apps work excellently for building a deeper relationship with your core userbase and are a must for any brand that values loyalty, engagement, and retention.

However, nothings perfect. Native apps are not a replacement for great web experiences.

Native apps are only relevant to those who, well, have the app installed. They do nothing for new visitors checking you out on the web for the first time, casual users who drop by now and again and arent yet committed enough to install the app or customers who are on desktop. 

These potential customers are absolutely crucial for success too. First impressions matter, a lot, and native apps always help in the early stages of the funnel. You need to provide a fast, smooth experience for the entire journey. How?

Enter progressive web apps (PWAs). If you have a website, and its remotely important to you or your business you need a PWA. 

In this article, were going to define progressive web apps, discuss their most important benefits, and share 50 examples of the best PWAs on the internet. 

Well wrap up with some pointers on how to build a PWA, and how they work with native mobile apps to create a winning mobile UX combo. Lets dive in. By the end of this article, youll know everything you need to know to get started on your progressive web app project.

Well begin with the fundamental question what is a PWA?

PWAs are great to give a better experience to web visitors. But if you want to send push notifications across iOS and Android, if you want to be on the app stores and give your users the experience they want from a mobile app, they might fall short of expectations. ASO World helps you convert your website into native mobile apps, with solutions for news sites, blogs, eCommerce stores, and any site or web app, whatever tech stack you use. Get a free demo to learn more and see how it can work for your site.

What Exactly is a Progressive Web App? Lets define a PWA

Progressive web apps combine the best of the web with features that were previously only possible on native apps. 

PWAs live in the browser like a traditional website and are fully connected to the webs infrastructure of links and search engine indexes. Like native apps, though they can be launched from a home screen icon, send push notifications to the users device, load in a split second, and be built to work offline. 

Progressive web apps are not separate from your site. They are an enhancement of your site that brings it up to date with current best practices and leverages cutting-edge web technology like service workers to provide an app-like experience from within a mobile browser.  

Maybe you still arent sure exactly what they are though. 

This is understandable, as the term is bandied about a lot but solid definitions are elusive. Lets look at the history of the term to clarify things. 

The Original Definition of a Progressive Web App

The term Progressive Web Appwas coined in 2015 by Francis Berriman and Google engineer Alex Russell. They had been observing the emergence of a new class of web applications, and over dinner decided to define and name them. 

They came up with the following criteria:

· Responsive: to fit any form factor

· Connectivity independent: Progressively enhanced with Service Workers to let them work offline

· App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions

· Fresh: Transparently always up-to-date thanks to the Service Worker update process

· Safe: Served via TLS (a Service Worker requirement) to prevent snooping

· Discoverable: Are identifiable as applicationsthanks to W3C Manifests and Service Worker registration scope allowing search engines to find them

· Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications

· Installable: to the home screen through browser-provided prompts, allowing users to keepapps they find most useful without the hassle of an app store

· Linkable: meaning theyre zero-friction, zero-install, and easy to share. The social power of URLs matters.

You can see how these criteria fulfill the web apppart of the definition. 

For many years companies like us and others created platforms that allowed businesses to create app experiences with web technologies. This works great to this day, but there are tradeoffs. In order to create a great native app experience, you lose the discoverability and linkability of the web. 

New web technologies like service workers (well get into those later) emerged and changed things allowing developers to build experiences that took the best of native app UX and put that in the browser, thus retaining all the benefits of the web. 

You no longer needed to accept a mediocre mobile web UX, while pushing people to download your native apps to get the real deal. You could provide a great mobile experience across the App Stores and the web, to everyone who interacted with your brand online. 

This is what Berriman and Russell observed. They didnt invent anything, they noticed a shift in the web and named it. 

What about the progressivepart?

In this context, it means that the apps are built with progressive enhancement. This is a design technique focused on building a baselineexperience that works for everyone but that upgrades and enhances on more advanced devices. The experience of a progressive web app isnt necessarily the same for all users, it adapts based on the power of their device as well as the permissions they grant. 

So is Berriman and Russells definition enough? The problem is that few PWAs actually fulfill all of those criteria. They are more like a wish list, a target to aim for, or a model case. 

Googles Definition of a Progressive Web App

Microsoft has been enthusiastic about PWAs for some time. Apple took some convincing and is now (mostly) in. Among big tech though, it was Google that really championed PWAs from the beginning. 

That said, Google themselves dont seem to be 100% sure about the definition. Back in 2015 they put out a list of 10 characteristics, then reduced that to six, then added three new ones. 

Currently, Googles definition of a progressive web app includes three pillars. On their introduction page, they state that PWAs are:

Web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application

This is more helpful, but not that helpful as its so broad. It hints at the key point though, that PWAs are bringing experiences to the web that were traditionally associated with native platforms exclusively. 

The Technical Definition of a Progressive Web App 

A third way that we can define a PWA is by specifying the purely technical, rather than UX criteria. 

This is what web developer and author Jeremy Keith attempted in his 2017 blog post What is a Progressive Web App?.

Keith thinks that the confusion about PWA definitions is unfounded and that basically, three criteria must be met:

1. HTTPS – PWAs must run on secure servers employing HTTPS. Service workers are essential for their potential, and they can only be used if you have HTTPS in place.

2. A Service Worker – essentially a JavaScript file that runs separately from the main browser threadand allows the developer control over how the app handles network requests and caching. This helps to drive the impressive speed and offline capabilities of PWAs.

3. A Web App Manifest – a JSON file that provides a description of the application to the browser, including details like the name, author, icon, description, and resources to run it. This ensures that the application is discoverable. 

Keith goes on to note that this is a minimal, bare-bones definition. PWAs are capable of a whole lot more, but they must fulfill these three technical criteria to make the cut. 

So weve seen the original observational/aspirational definition, Googles UX-driven definition, and a minimalist technical definition. What can we surmise? Although there may still be a little ambiguity, we now have a good idea of what a progressive web app is. 

A PWA is a modern, secure, fast-loading website that uses cutting-edge web technologies to achieve these characteristics. Unlike traditional websites, it performs and feels to the user like a native app and escapesthe browser tab in the process. 

Escaping the tab (source)

As Alex Russell puts it:

These apps arent packaged and deployed through stores, theyre just websites that took all the right vitamins

This is a great way to put it. PWAs are the latest generation of the web. They are web apps that are able to leverage the potential of modern browser technology. By turning your own website into a PWA, you give it the vitaminsnecessary for it to perform optimally. 

Were now going to move on now to the benefits of building a progressive web app, before looking at 50 PWA examples to inspire your project. 

Progressive Web App Benefits

We stated earlier that if you have a website, and it is in any way tied to the success of your business – you need to build a PWA. 

That may seem like a bold statement, but its the truth. Why? 

In a nutshell, by not building a PWA you are likely leaving customers, revenue, and growth on the table. As Pete LePage and Sam Richard from Googles web team put it:

The numbers dont lie! Companies that have launched Progressive Web Apps have seen impressive results. For example, Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%. After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users. Hulu replaced their platform-specific desktop experience with a Progressive Web App and saw a 27% increase in return visits

This just scratches the surface. 

Lets take a look at the results that other well-known brands have achieved as a direct consequence of launching PWAs. 

· Alibaba boosted mobile web conversions by 76%, saw 14% more active users on iOS and 30% on Android

· Debenhamssaw a 40% increase in mobile revenue, a 20% increase in conversions, and above market online growth

· Pinterest saw a 40% boost in total time spent, 44% growth in user-generated ad revenue, and 60% more core engagement

· Forbes got a 43% increase in sessions per user, a 20% improvement in ad viewability, and 100% more engagement

· BMWsaw a 30% increase in CTR to their sales site, 4X faster load times, 50% growth in mobile users, and 49% more organic traffic

· MakeMyTrip boosted page speed by 38%, tripled conversion rates, and saw a 160% increase in shopper sessions

· AliExpress boosted conversion rates for new users by 104% (+82% on iOS) and saw a 74% increase in time spent per session with 2x more pages visited per session

· saw 38% more conversions, a 10% longer average session, 40% lower bounce rate and an overall 30% faster page load time

· Wego tripled ad CTR and saw 26% more visitors and 95% more conversions overall. On iOS, they got an impressive 50% boost in conversion and a 35% increase in session duration

· Treebo saw a 4x increase in conversions year on year. Repeat users converted 3x higher.

· Tinder more than halved loading times from 11.91 seconds to 4.69 seconds and saw engagement up across the board with a PWA 90% smaller than their native app

How are all these amazing results possible? A lot of it boils down to the fact that PWAs provide a much better user experience, and great business results flow from that. 

Post a Comment

Previous Post Next Post