What Is a PWA? the Ultimate Guide to Progressive Web Apps in 2024
We're about to answer all your burning questions about progressive web apps (PWAs). We’ll explain what a progressive web app is, how they’re different from regular web apps, and the advantages and disadvantages of progressive web apps vs traditional web apps and native mobile apps.
We’ll also give you an in-depth background on PWAs, and the results that some major businesses have had from launching their own progressive web application.
Essentially, anything you ever wanted or will want to know about progressive web apps, you can find in this article. Read on for more!
What is a Progressive Web App?
A Progressive Web App (PWA) is a browser-based website that replicates the look, feel and features of a native mobile app.
PWAs live in the browser like a traditional website and are fully connected to the web’s infrastructure of links and search engine indexes.
At the same time, like native apps, 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. Generally the user doesn’t need to take any special action to access a progressive web app - it will just show up when they access the website in a mobile browser.
Want to see some real, live, progressive web app examples? This article shows you 50 of the best progressive web applications out there today.
Some Background on Progressive Web Apps
The actual definition of what is and isn’t a progressive web app is pretty vague, truth be told. There’s no clear line that separates a regular mobile website and a progressive web app. So it’s worth looking at the background of PWAs and several different parties’ definitions to get a feel for what a PWA really is.
The Original Definition of a Progressive Web App
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:
- 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 “applications” thanks 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 “keep” apps they find most useful without the hassle of an app store
- Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.
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.
“Progressive” Web Apps
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.
Google’s 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 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. In 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 web users 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:
- 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.
- A Service Worker – essentially a JavaScript file that runs separately from the main browser “thread” and 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.
- 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.
Summing Up: What Does “Progressive Web App” Really Mean?
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.
As Alex Russell puts it:
“These apps aren’t packaged and deployed through stores, they’re 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 “vitamins” necessary for it to perform optimally.
Why stop at PWAs? It’s easier and more affordable than ever to convert your website into real, fully-functional mobile apps. Book a free demo of MobiLoud today to see how.
Do I Need a Progressive Web App?
Let’s get this out of the way - if you have a website, and it’s remotely important to you or your business – you need 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, the scale of which is going to continue to grow as mobile keeps taking ground from desktop as the most popular way to use the web.
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”
Let’s 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
- Debenhams saw 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
- BMW saw 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 74% increase in time spent per session with 2x more pages visited per session
- Housing.com 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.
Benefits of Progressive Web Apps
Let’s take a more detailed look at some of the key progressive web app benefits, starting with the most important one – speed.
PWAs are Lightning Fast
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:
- Almost 50% of users say their top frustration on mobile is waiting for slow pages to load (source)
- Pages that load within 2 seconds have a 9% bounce rate, pages that take 5 seconds have a 38% bounce rate (source)
- A “sharp decline in conversion rate” is associated with average load times increasing from 1 to 4 seconds (source)
- Every 1 second improvement in load time boosts conversion rate by 2%, while a 100 millisecond improvement generates up to 1% more incremental revenue (source)
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.
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.
Why are Progressive Web Apps so Fast?
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”
Grigsby goes on to explain that:
“When someone requests a new page from a progressive web app, most of the files needed to render that page are already stored on the local device. This means that the page can load nearly instantaneously because all the browser needs to download is the incremental information needed for that page”
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 similar impressive performance to the web.
PWAs Provide an App-Like UX on 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:
- Work offline or in poor network conditions (more on this next)
- Be installed on the user’s device and accessed via a home screen icon like a native app
- Send push notifications to the device’s lock screen (unfortunately only on Android)
- Be developed to deliver a full screen, “immersive” experience with a navigation structure that mimics a native app
- Make use of animations like a native app
- Be developed to access the device’s hardware like the camera and GPS
The early mobile web was pretty rough. 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 applications.
This goes to show the potential of PWAs for recreating the UX that mobile app users know and love.
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.
PWAs are Reliable
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 first visit, PWAs can also provide full offline functionality!
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 a flawless internet connection.
PWAs are Secure, Efficient and Adaptable
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 device. As the authors of The PWA Book put it:
“They treat their mobile devices like cameras, computers, notepads, assistants, and – most importantly – as a treasury of memories. If downloading an app means that they have to sacrifice precious photos or messages, they think three times before clicking yes.”
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.
PWAs let you Engage Users with Push Notifications
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 example of how different businesses might use push notifications:
- News Publishers
“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.
- eCommerce Stores
“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.
- Social Platforms and Communities
“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 any more 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 into push notifications returned 4X more often and spent 2X as much time on site. Chief Business development officer Mujeed Hazzaa said that:
“Push Notifications are a huge part of our mobile engagement strategy. It’s a more personal way to communicate with our customers. That’s incredibly valuable to our bottom line.”
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.
Progressive Web Apps will Grow your Business
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, who cares about their mobile web presence. They allow you to upgrade your entire web UX, and offer a fast, modern experience that is all but guaranteed to improve key metrics.
Disadvantages of Progressive Web Apps
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.
Compared to a regular website or web app, there’s little to no reason not to build a PWA, as long as you have the means to do so.
The question of progressive web apps vs native mobile apps, however, is a more interesting one. Let’s take a look at this now.
Progressive Web apps vs Native Apps
There’s an idea going around that progressive web apps and native apps are rivals. That PWAs will render native apps irrelevant and unnecessary, and that businesses 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 inaccurate. 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 on mobile web browsers, 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.
TLDR: There’s no need to choose between PWAs and native apps. We recommend you build both, a progressive web app to serve your mobile web visitors and native mobile apps to serve repeat users on iOS and Android devices.
If you want to read more on how progressive web apps compare to native apps, check out this post for a deeper look.
How to Build a Progressive Web App
The purpose of this guide is to give you a complete high level overview of PWAs. The intricacies of their development isn’t something we’re going to get into, but we are going to lay out 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 fulfils its potential – you need to invest more. To see why, let’s break down the fundamental steps.
- Purchase an SSL certificate to be configured through your hosting service
- Develop an app shell
- Verify if the browser supports service workers
- Register the service working file
- Add push notifications and web app manifest
- Set up the install prompt
- Test the app’s functionalities
- Audit the app based Lighthouse’s checklist
- Fix bugs
- Launch the app
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 may also need designers who understand native app user experience and how to apply that effectively 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.
Cost and timescale of building a progressive web app
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).
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 is likely to more than pay for itself in the long run.
Turn a WordPress Site into a PWA
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!
Get in touch with one of our mobile experts for a consultation to find out more.
Start Building a Progressive Web App Today!
You should have a good overview about the characteristics and power of progressive web apps by now.
To learn more, check out these resources:
- The PWA Book
- Google’s resources on web.dev, and Google Developers
- PWA Stats (interesting metrics and case studies)
- Google’s PWA Roadshow (great video series)
- Mozilla’s excellent PWA guidelines
- Jason Grigsby’s book Progressive Web Apps
- What Web Can Do Today? (showcases how web tech has developed)
- Yes, that web project should be a PWA (excellent guide/article)
- Our guide on the difference between native, web and hybrid apps
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.
Should You Build Native Apps Too?
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 platform, MobiLoud. We help you convert your site or web app into top quality native apps in just weeks, for less than $1,000 investment out of the gate.
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.
We can also help you out with a PWA, so you’ll have the ideal mobile combo going forward. If this sounds good – then get a free preview of your app and book a demo today. If you decide to take another route, then good luck in your journey. We hope you enjoyed the PWA examples and got some inspiration to help you thrive on mobile!
Convert your website into a mobile app
