JH-D19 Waterproof Hearing Aid
You Are Welcome To Click, And You Are Also Welcome To Join
Interested in building a progressive web application? This guide will tell you everything you need to know – at the same time there are examples of the best PWAs on the market
For many years, we have been preaching: you need a local application. There are good reasons for this, and we still insist on it. To
However, nothing is perfect. Native apps cannot replace a great web experience.
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 aren’t 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 it’s remotely important to you or your business – you need a PWA.
In this article, we’re going to define progressive web apps, discuss their most important benefits, and share 50 examples of the best PWAs on the internet.
We’ll 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. Let’s dive in. By the end of this article, you’ll know everything you need to know to get started on your progressive web app project.
We’ll begin with the fundamental question – what is 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 web’s 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 user’s 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 aren’t sure exactly what they are though.
This is understandable, as the term is bandied about a lot but solid definitions are elusive. Let’s look at the history of the term to clarify things.
The term “Progressive Web App” was 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:
You can see how these criteria fulfill the “web app” part 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 (we’ll 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 didn’t invent anything, they noticed a shift in the web and named it.
What about the “progressive” part?
In this context, it means that the apps are built with progressive enhancement. This is a design technique focused on building a “baseline” experience that works for everyone but that upgrades and enhances on more advanced devices. The experience of a progressive web app isn’t 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 Russell’s definition enough? The problem is that few PWAs actually fulfill all of those criteria. They are more like a wish list, or a target to aim for, or a model case.
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 don’t 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, Google’s 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 it’s 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.
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:
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 we’ve seen the original observational/aspirational definition, Google’s 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 “escapes” the browser tab in the process.
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 “vitamins” necessary for it to perform optimally.
We’re 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.
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 it’s 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 Google’s web team put it: “The numbers don’t 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.
Let’s take a look at the results that other well-known brands have achieved as a direct consequence of launching PWAs.
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.
There’s more to it than that though. Let’s take a more detailed look at some of the key progressive web app benefits, starting with the most important one – speed.
Modern consumers expect instantaneous loading. If something doesn’t load in a heartbeat, many will lose interest, perhaps permanently. This is both self-explanatory, and supported by a ton of data:
Essentially the faster your site loads, the better. If you make your customers/readers/users wait then a decent % of them will bounce and not give you their money.
Improving site speed drives better results across the board. That’s all there is to it.
So how can a PWA help you to achieve this? Progressive web apps are fast. Really fast.
Pinterest for example managed to cut their “time to interactive” loading time down from a sluggish 23 seconds to just 5.6 seconds. This was on average Android hardware over a slow 3G connection. This had a welcome knock-on impact on key metrics.
Not bad at all. Pinterest’s results are not unusual at all though.
Streaming platform ZEE5 tripled site speed and halved buffering time by building a PWA. Uber’s PWA loads in less than 3 seconds on 2G networks. Forbes cut mobile loading times from 6.5 seconds on its previous mobile site to just 2.5 seconds with its PWA.
Speed improvements are guaranteed when you build a good, well-designed progressive web app.
PWAs are so fast thanks to the all-important service workers. As Jason Grigsby puts it in his excellent book Progressive Web Apps: “Progressive web apps use service workers to provide an exceptionally fast experience. Service workers allow developers to explicitly define what files the browser should store in its local cache and under what circumstances the browser should check for updates to the cached files. Files that are stored in the local cache can be accessed much more quickly than files that are retrieved from the network”
One of the traditional advantages of native apps is that they can be lightning fast. They achieve this in a similar manner – all the files necessary to run the app are downloaded when you install it, and it only needs to retrieve new data. Service workers allow progressive web apps to bring a similarly impressive performance to the web!
Speed, which we’ve already discussed, is obviously a huge part of UX. There are other important factors though and PWAs help out here too.
Native mobile apps were long the gold standard for mobile UX. They still are (in some ways at least), but PWAs can now match much of their feel and functionality straight from the browser.
For example, PWAs can:
The early mobile web was pretty rough. The old paradigm of a desktop browser was “bolted onto” smartphones where it didn’t really fit. The responsive design era improved this significantly, but there was always something lacking.
Native apps were unambiguously built for smartphones. They always fitted the experience of the device better. PWAs have blurred this line though, the distinction in terms of experience can be hard to pinpoint.
For example – have you ever used Instagram Lite, Google Maps Go, or Twitter Lite?
You can download them on the Google Play store and check them out – and see how they feel like any other native apps.
You would be forgiven for assuming that these are lighter, leaner versions of their main native apps. As you might have guessed though – they are progressive web apps.
This goes to show the potential of PWAs for recreating the native app experiences we all know and love. When we get onto the examples a little later, you’ll see exactly what we mean!
Note: you may have noticed that these PWAs are live on the Google Play store. Google opened the Play Store to PWAs in early 2019! This shows how confident they are about the future of PWAs as truly cross-platform applications. You have to jump through a few hoops to get your PWA on there, but it is certainly possible. As of now, there is no information from Apple about whether this will ever be possible on the iOS App Store.
We’ve all had the experience of trying to use a website or web app on a shaky mobile connection. It isn’t fun.
Thanks again to service workers, that define specifically what the browser should cache locally – PWAs can be built to offer a fast, full experience even when the user has poor connectivity.
This can be taken a step further too. Through “precaching”, which is when the whole application is downloaded and stored on the first visit, PWAs can also function completely offline!
This is really important when you consider how many people still live in rural and poorly served areas, and the billion or so people coming online for the first time over the next few years – many of whom will not enjoy flawless connectivity.
For service workers to do their thing, your website must be completely secure with HTTPS.
Hopefully, it does already, but if not building a PWA will force you to do all the necessary work of making your site 100% secure.
PWAs are also very efficient. A key factor that puts people off downloading native mobile apps is the available storage space on their devices. PWAs don’t force people to make such tough decisions. They are much lighter than native apps, and the installation process has less friction (one tap on a button and a shortcut is created on the home screen). The PWA does take a little space on the device, but it is negligible in comparison.
The service workers that drive this efficiency are also responsible for reducing server load and minimizing the risk of sluggish performance and crashes during intense periods.
Progressive web apps are also very adaptable. Since they are based on the web, they can be maintained, updated more easily than native mobile apps.
When you want to change or update something you can move fast, there’s no need to deal with the App Store gatekeepers, require the user to manually update, or contract specialized native app developers.
It’s as easy as updating your site is today – and the updates (deployed to a server) are available almost instantly to the user.
We’ve been talking about the power of push notifications for years. They are the best way to engage and communicate with your audience on mobile – bar none. You can use them to update users, nudge them back into the apps, promote offers and products, and generally stay top of mind in their busy lives.
Here are some examples of how different businesses might use push notifications:
“Breaking News, X and Y just happened!”
Push notifications work great for digital publishers, and allow them to drive traffic back into their top stories and alert users with time-sensitive breaking stories.
“Special offer / you abandoned your cart / your items have been dispatched”
Push works wonderfully for eCommerce. Shopping apps regularly send notifications out to alert users to offers and new products, keep them up to date with the delivery process, and deliver special app-only coupon codes.
“Your friend just sent you a message/friend request/replied to you”
We’ve all likely experienced push messages from social platforms before. They are the secret ingredient that social apps use to get you back on their platform, engaged, and interacting with other users.
These are a few of the use cases. But really push notifications can be a great boost for any business. They were (and still are) one of the strongest reasons to build native apps.
Thanks again to our friend service workers – you don’t need native apps anymore to send push notifications. You can send them from your website (if you turn it into a PWA).
Push notifications need to be used properly and not abused, but they can bring a lot of benefits and are a great benefit of building a PWA.
For example, after building a PWA, Lancome saw that 8% of consumers who tap on a push notification make a purchase and improved conversion rates on recovered carts by 12% via push notifications.
Another one is eXtra Electronics, Saudi Arabia’s leading electronics retailer. eXtra made 100% more sales from users arriving through web push and noticed that those who opted in to push notifications returned 4X more often and spent 2X as much time on site.
When you turn your site into a progressive web app, you can get strong results for your business too. There’s one big caveat – you can only use them on Android. iOS doesn’t support them, and it’s anyone’s guess if it ever will. If push notifications are important to you and you want to send them to all users then you’ll have to build native mobile apps.
We’ve gone through some of the most important benefits of turning your site into a progressive web app.
The bottom line is that they make total sense for any business with a website. They allow you to upgrade your entire web UX and offer a fast, modern experience that is all but guaranteed to improve key metrics.
What are the downsides of building a PWA?
None really, except the time and money you need to invest to build one. Even so, a PWA is relatively affordable and very likely to (more than) pay for itself over time – especially if your site is tied to any kind of revenue through advertising, eCommerce, or memberships.
Still, need convincing?
Let’s tie everything together with some examples. We’re going to highlight 50 of the best progressive web app examples on the internet, and show you firsthand what we’ve been discussing so far.
If you want to develop an impressive PWA, the first step is to look into successful progressive web app examples for inspiration.
As part of our mission to inspire you, we’ve collected 50 model examples of the best PWAs out there right now. You can jump to the section that is most relevant to your own business, skim the list until something catches your eye, or read through all the progressive web app examples to get a good overview!
Let’s get into our best PWA examples.
For one of the world’s most popular coffee chains, Starbucks developed its PWA to boost its customer engagement by featuring loyalty programs and an easier ordering process.
The app was designed to replace its old mobile app to keep its engagement better no matter the device.
Users can first view its Rewards section where customers can redeem their free food and drinks, birthday treats, refills, and payment options when ordering through their smartphone.
The rest of the app page features custom orders, store availability, delivery details, and an app menu.
And just like ordering from a barista, ordering your favorite drink allows you to customize its size, add-ins, and shot options. Starbucks also adds Nutrition Information, Ingredients, and Allergens sections for those who monitor their diet.
What we like about this eCommerce PWA:
What Alibaba is to China, Jumia is to Africa. This successful online marketplace was first launched in Nigeria in 2012 and then swiftly took over Africa’s eCommerce industry since then.
In 2016, it launched its PWA as an answer to the unstable internet connections in the sub-Saharan region. With PWA, it was able to corner a significant chunk of the market relying on 2G networks with data caps.
Introducing a PWA was the perfect solution to deliver an app-like user experience without consuming large data bandwidth.
The result? According to Google, the company boosted its conversion rate by 33% and grew its users 12 times more (compared to native apps). In addition, it has tremendously reduced its bounce rate and user device storage requirements.
What we like about this eCommerce PWA:
When it comes to PWA for the online marketplace, trust Indian classified ads company OLX.in. With its robust categories that span from properties to fashion, sellers and buyers are better matched with the company’s PWA.
Users can easily notice the ease of using the app when they search for specific products or score great deals from sellers.
OLX revealed that it has experienced higher CTR on its ads and a huge 80% drop in bounce rates since it transitioned to PWA as reported by Google.
What we like about this eCommerce PWA:
Another competitor in the Indian eCommerce scene is Flipkart continues to redefine the online shopping experience with its PWA.
As users scroll down through the app, product categories, limited offers, bestsellers, and discounts are presented, with the goal of hooking the customer to browse and spend more time on the app.
Flipkart’s PWA began in 2015 through Flipkart Lite. The company wanted to make shopping more accessible among Indians even if internet connections were intermittent in most areas.
What we like about this eCommerce PWA:
Realizing that the market for health supplements has become more competitive than ever, US-based Pure Formulas is considered to be a pioneer in this industry when it comes to launching its own PWA.
After discovering that its website and mobile app were suffering from very high bounce rates due to a sluggish checkout process, the company developed a PWA that gave them a complete turnaround.
It reported higher conversions and an increase in average order value (AOV).
What we like about this eCommerce PWA:
With a highly responsive PWA, Ali Express is considered one of the most in-demand apps today for B2C transactions.
Thanks to the company’s wide coverage of product categories, users can browse through thousands of options without slowing down page loading using the PWA.
Since its launch, AliExpress has announced that it has experienced better re-engagements and conversion stats thanks to its PWA.
What we like about this eCommerce PWA:
Jack Ma’s The Alibaba Group needs no further introduction when it comes to the success of its Alibaba PWA. The B2B eCommerce app is an ideal model for any PWA: fast, responsive, light, and very engaging.
Alibaba was successful in terms of its mobile web and mobile app launches. However, it needed to corner a huge part of the market through improved engagement. And the company’s PWA was the perfect solution to that.
It reported a 76% increase in total conversions according to Google.
What we like about this eCommerce PWA:
Not to be outdone by its competitors, America’s eighth-largest retail chain, Target, quickly acted on its customer analytics study. In 2015, it discovered that its customers begin their journey on their mobile device and then make the purchase using their computer.
The management thought of introducing a PWA and since then, its app users have increased by a huge number and online transactions have improved significantly without alienating users on different devices.
What we like about this eCommerce PWA:
Hopefully, these progressive web app examples highlighted some of the main points we’ve been making in this guide.
These brands invested in their mobile UX and reaped the benefits. You can and should follow in their footsteps and go “mobile-first” with an impressive progressive web app for your own business. We’re going to tell you how, but first, we’re going to answer a key question – “what about native apps?”
Maybe you were toying with the idea of building iOS and Android apps yourself, and you got side-tracked into looking at PWAs instead. Perhaps you aren’t that fussed about launching on the App Stores and just want a much better website.
Either way – we’re going to briefly cover the “native vs PWA” debate, and explain why we think that a PWA is a minimum, and PWA + native app is optimal.
There’s an idea going around that progressive web apps and native apps are rivals. That PWAs will render native apps irrelevant and unnecessary. That business will choose between building a PWA and a native app and always opt for the latter.
This narrative is misguided and presents native apps vs PWAs as an either/or choice, which is a false dichotomy. The truth is that PWAs and native apps are a brilliant combination, and work synergistically together. They cover each other’s bases and ensure that you are giving everyone an optimal user experience regardless of the channel.
PWAs benefit from the reach, discoverability, and ubiquity of the web. They pull in organic traffic and impress first-time visitors with a fast and sleek experience, persuading them to spend more time (and money) on your site. They give an easy installation option that reduces friction and gatekeepers and can appeal even to those worried about limited device storage space.
They provide the perfect means of building a connection with new visitors and those who are engaged enough to return but not enough to download your native apps for whatever reason. PWAs are the perfect means of nurturing people through your funnel.
Native apps on the other hand have poor reach and visibility compared to PWAs. They are behind the “walled gardens” of the App Stores and require a higher level of commitment from the user to install and download them. On the other hand, they are more in keeping with existing user habits, allow you to send push notifications to iOS users, and can get you brand-boosting visibility/presence on the App Stores.
Native apps are great for your core readers/customers/users. Your most loyal base should be encouraged to download your native apps and access them – behind a login screen or paywall even – so you can gather them in one place and really focus on understanding and engaging them, maximizing LTV and retention as much as possible.
Native apps are a great “home” for your biggest fans.
Google puts it this way:
“PWAs don’t have to replace native apps; they can work in tandem with them. Retailers, for instance, can use a native app to engage loyal users who are more likely to install an app but use a PWA to easily reach new users. Users who interact with the PWA can then be prompted to download the mobile app in the future”
Our recommendation – build both!
If you’re limited budget-wise, go for a PWA. If you have a native app but not a PWA, you should definitely build one ASAP. If you’re fully committed to building an optimal mobile-first UX and able to invest in achieving that then build both and have them complement each other’s strengths and weaknesses.
The purpose of this guide is to give you a complete high-level overview of PWAs. The intricacies of their development aren’t something we’re going to get into, but we are going to layout your options so that you can make the choice yourself.
There’s a lot of content floating around online about how you can build a PWA in “10 minutes”. With promises of bringing that native app feeling to a traditional web app all from scratch in just less than an hour, it’s easy to get enticed by these tutorials.
Is it legit though?
Yes and no. These PWA “hacks” also are for fulfilling the absolute minimum criteria – HTTPS, web manifest, and service worker. If you are interested in creating a very basic, functional progressive web app – you could try Microsoft’s PWABuilder. With a bit of tinkering and technical know-how, you could get something decent up and running.
In order to build a unique, optimized, and feature-rich progressive web app – that really fulfills its potential – you need to invest more. To see why let’s break down the fundamental steps.
Sounds easy, right?
In reality, to do this well and build a good custom progressive web app requires front-end developers with experience building complex web apps.
The vital work of setting up the service worker and caching for optimal performance is complex and requires real skill. Then, Depending on your requirements you’ll also need designers who understand native app user experience and how to apply that effect on the web.
Unless you’re a pretty big company, you probably don’t have a load of talented front-end developers sitting around waiting for you to tell them what to do. You’d need to find them, hire them and put a team together and manage them – a difficult task if you’re not experienced with such things. Good front-end developers are always in demand too, and their contract rates reflect that.
So how much would this cost? Well, it’s a bit like the classic “how long is a piece of string?”
It depends entirely on the complexity of the app you want to build. According to the authors of The PWA Book:
Building a PWA from scratch will take something between 3400 wh (for a small app) to 9000 wh (a dedicated project we’ve done). This means a cost between $400K and $1m. Using a cloud platform will be at least 75% cheaper, and Time to Market will also be 75% shorter (2-3 months instead of 8-12 months).
– Chapter 10, The PWA Book
This seems on the pricey end, but it gives you an idea of how major brands like the ones we looked at above invest in their experiences.
Of course, if you are converting a site into a PWA rather than building it from scratch it will be cheaper and easier in most cases. As a rough estimate, you’re looking at investing at least 3 months, and $20,000 to $50,000 to get a great result.
Developers follow different project phases but in most cases, it involves seven phases: discovery, design, revision, preliminary development, testing, bug fixing, and final launch.
If your PWA is more complex, then expect its completion to last longer considering the advanced functionalities that have to be integrated such as GPS, social media support, and camera access.
That being said, simple PWAs can take less than three months (or even just a couple of weeks if they are bare-bones). If you want to have more advanced features such as backend admin panel, visualization patterns, and other integrations, then you can still have your PWA in less than six months.
This may seem like a sizable amount, but if you put it in context it’s more than worth it. Not only are they more affordable and faster to build than native apps, but the speed and improved user experience are likely to more than pay for themselves in the long run.
If you’re on WordPress, there are some more straightforward ways to turn your WordPress site into a PWA, and some WordPress PWA plugins that you can try out.
We can help to advise you on your options, and If your site is the right fit – use our custom platform to convert it into a PWA in just 2 weeks, for a fraction of the standard cost. We can also build native iOS and Android apps from your site in a similar timeframe, so you’ve got all your mobile bases covered for 2021 and beyond!
Get in touch with one of our mobile experts for a consultation to find out more.
You should have a good overview of the characteristics and power of progressive web apps by now.
To learn more, check out these resources:
Now it’s your turn. It may seem like a daunting task – but you need to turn your website into a progressive web app to really have an impressive, modern, optimal web presence.
When it’s ready to launch, you’ll be happy, we guarantee. And your customers will reward you by spending more time, attention, and money engaging with your business.
As we mentioned though – a PWA is not a replacement for native apps. PWAs are primarily a much better website. It can be hard to get users to install them on their devices, as they are not accustomed to that yet, and you miss out on sending push notifications to iOS users and a brand presence on the App Stores.
A PWA is a must, but native apps are still the ultimate mobile user experience. The only reason some are wary or negative about the prospect of native apps is the large expense ($50,000+), and the long and laborious development process that traditionally came along with them.
If you share those concerns but are interested in building iOS and Android apps for your brand, you should check out our platforms News, Commerce or Canvas. Whichever one is right for you – you can convert your site or web app into top-quality native apps in just weeks, for as little as $100/m.
Our platforms can be used to convert any website to a mobile app. It doesn’t matter what your site is built with. MobiLoud is great for building:
And anything in-between! You’ll be set up with unlimited push notifications on Android and iOS, and you’ll have all the features you need to build a winning cross-platform presence on the web and the App Stores.
More related app promotion guides: