Progressive Web Apps 101
If you feel confused when you hear the term “progressive web apps,” you’re not alone. Although PWAs have been around for at least four years, not everyone can tell exactly what they are. Progressive web apps may be called the embodiment of an improved UI and smooth customer experience. But there are still several variations as to what can be considered a progressive web app. What’s so unique about them and why should you bother creating one? Do they have any specific benefits for users or businesses? Let’s unpuzzle PWAs step by step.
What’s a Progressive Web App?
…they’re just websites that took all the right vitamins.
PWAs combine the best of the web and a mobile app. They are web pages or websites, but at the same time, they can be shown to a user like a native mobile app or a traditional application. We can think of a PWA as a website users can view like an app. You can install a progressive web, but, as opposed to traditional mobile apps you can find in application stores, PWAs are delivered through the web.
Google’s Alex Russell was the first to give an outline of the term “progressive web app.” He defined specific criteria that a website should meet to be recognized as a PWA. These criteria basically originate from the customer experience concerns.
3 Basic Requirements to Qualify as a PWA
A PWA enthusiast, Jeremy Keith states that any website can – and should – be a progressive web app:
- It should be running under HTTPS. To make switching to HTTPS easier, there is an excellent automated client Certbot that fetches and deploys SSL/TLS certificates.
- It should have a Web App Manifest which contains the details about the application (name, author, icon, description) in a JSON text file.
There are tools like Lighthouse, PWA Builder and alike that evaluate your website and score it according to the listed criteria. If it meets all three requirements, it can be considered a PWA.
Based on the bottom line requirements, progressive web apps have a list of general characteristics that define this class of applications.
The Key PWA Attributes
- Responsive. PWA works on any device.
- Independent of connectivity. Service Workers allow PWAs to work offline or with a poor connection.
- App-like. PWA user experience resembles a native app interaction and navigation.
- Self-updated. Service worker API controls the process of automatic updates.
- Safe. HTTPS ensures data integrity.
- Discoverable. Web app manifest and service worker registration allow search engines to identify a PWA as an “application.”
- Engaging. Service worker features such as push notifications help to re-engage and motivate users.
- Easy-to-install. Users can save the frequently used apps on their home screen without searching them in app stores.
- Linkable. Keeping the social power of URLs, progressive web apps require no installation, are easy to use and share.
Let’s see how it all works on practice.
You open a website as an ordinary tab. On the backstage, however, it includes progressive web features, such as HTTPS, Service Workers, a Web App Manifest and the corresponding design. After you’ve visited the same website for the third or fourth time, your browser understands that you use this website frequently and shows an “Add to Home Screen” banner. Note that the prompt isn’t shown at the first interaction with the website not to look spammy.
If you decide to add the app to your home screen or app launcher, the shortcut appears on your device. Now, you can launch a PWA from your device even when you’re offline, view it in the full-screen mode and interact with it as you would with an ordinary mobile app.
In the end, we get an uninterrupted, engaging user experience, better conversion and superior performance regardless of the device and connectivity. Plus, PWAs use less data, load faster and are significantly cheaper to develop than a mobile app. It’s not surprising that many businesses are already leveraging this approach – or standard? – to developing customer-centered apps.
PWA Examples to Back Up the Theory
Progressive web apps are a win for businesses, regardless of the industry and audience. Here’re some big names that have developed PWAs to improve customer engagement and UX.
Your device doesn’t support Uber’s native mobile app? Not a problem anymore. The company has rebuilt its web client as a PWA, and you can now book a car even on a low-end device with a 2G network. The user experience remains the same. It’s lightweight (50kB) and loads within three seconds even on a 2G network.
The company noted that their website UX was slow and had low conversion: only a few visitors signed up or installed the mobile app. Their progressive web app changed the performance drastically: Pinterest saw an increase in ad click-throughs, user-generated ad revenue and a general 60% increase in engagement.
Being a global online marketplace, AliExpress has to provide excellent mobile experience as the share of mobile commerce is multiplying. To provide a wide web audience with the best app experience, the company built a cross-platform PWA and saw an incredible 104% increase in conversion rates for new users.
That is the sign of a great investment and one that will keep paying for itself as browsers evolve.
Lijun Chen, director of AliExpress Mobile Team
This popular business magazine was one of the first to try a progressive web app. Before the PWA, their website ranked second to last in the start render time – 6.5 seconds. Their PWA now loads in 2.5 seconds, has longer view sessions, significantly higher traffic and increased ad impressions. The new app feels and looks like Snapchat stories, and the number of readers finishing articles has grown sixfold.
The Starbucks PWA allows you to browse the menu, customize your orders and add items to the cart while being offline. Once online, you can complete your order and view location-based recommendations and prices. The PWA’s engaging and fast performance doubled the number of people making online orders every day.
Despite being a relatively young approach to web development, progressive web apps are becoming a new standard of customer-centered applications with great UX. Any website can grow to become a PWA by meeting a specific list of requirements. And it does have significant business benefits: from more engaging user experience and shorter loading time to an increased number of ad clicks. PWAs allow businesses to broaden their audience with users who have low-end devices and poor connectivity. Progressive Web Apps are also a way out for companies that don’t need a mobile app but still care about the high-quality UX for their customers.
What about your company? Have you tested the PWA performance already or are you just starting to think of implementing it? If you do, Skelia can help you out. Contact our web developers and ask all the questions you have on progressive web apps.