Do you know that with the ‘right vitamins’ your website can be the tool that propels your business to a successful digital future? especially you guys who are into ecommerce and busy building online business and presence.
This article is about knowing and understanding Progressive Web Applications.
For years, most businesses have been working hard to develop native mobile apps to remain relevant online and reach customers on their mobile devices.
We have helped our customers to vastly improve mobile user experience (UX), grow traffic, build more loyalty, and boost revenue. 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, nothing’s 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 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 progressive web application (PWA).
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?
PWAs are great to give a better experience to web visitors.
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 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 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 PWA’s actually fulfil all of those criteria. They are more like a wish list, or a target to aim for, or a model case.
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 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:
- 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.
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.
“These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins”
Alex Russell
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.
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 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.
- 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.
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.
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.
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 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.
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 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.
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. 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.
