Progressive Web Applications: What is a PWA and Why Should You Care?

When it comes to web design and development — and creating exceptional online experiences for your customers — a standard website isn’t the only option. Many businesses use native apps and progressive web applications (PWAs) to provide the best possible user experience (UX).

Here, we’re going to take a closer look at progressive web apps, explaining what they are and why you might choose to use them for your business.

Contents

• What is a PWA?
• Key PWA features
• PWA technologies explained
• PWA vs a native app
• PWA examples: how big brands are using progressive web applications
• Does a PWA make sense for my business?

What is a PWA?

A Progressive Web App (PWA) is a website or application which takes full advantage of modern web capabilities to deliver an app-like experience to its users.

These apps are built using web technologies and can be indexed in search engines. They’re hosted on servers much like a website and are accessible via URL. They can also leverage mobile OS usability features and act more like a native app.

Confused? You’re not alone.

Perhaps the easiest way to make sense of PWA is to think of it as a new standard for website usability. We can view PWAs as building on the trend for better mobile usability, rather than being an entirely new and separate thing.

Key PWA features

So what does a PWA look like? To be considered a PWA, a website needs to meet a certain set of requirements. According to Google Developers, these minimum requirements are:

• Reliability: A PWA loads fast and works offline.
• Usability: Pages should load instantly, scrolling should be smooth and navigation between pages should be seamless, even on slow data networks.
• Accessibility: A PWA should be launchable from a device home screen and should also be able to receive push notifications.

The actual list of key PWA features is a bit more involved. For the lowdown, we can turn to Alex Russell, a Google software engineer, who coined the term ‘progressive web application’ back in 2015.

He specified a set of rules that developers have to follow to meet the PWA standard for usability. Here’s his list of key PWA features.

PWAs have to be:

• Responsive: They should fit any device and screen.
• Connectivity independent: Thanks to Service Workers (more on this in a moment) PWAs work offline.
• App-like: Developers need to use a Shell + Content application model to create ‘appy’ navigations and interactions.
• Fresh: PWAs are always up-to-date thanks to the Service Worker update process.
• Safe: PWAs are served via transport layer security (TLS) to prevent snooping.
• Discoverable: PWAs are identifiable as ‘applications’ so search engines can find them.
• Re-engageable: PWAs should be able to access the re-engagement user interface (UI) of the device operating system (OS). This means that things like push notifications are possible.
• Installable: Users can install PWAs to the home screen through browser-provided prompts. This allows users to ‘keep’ apps they find most useful without the hassle of using the app store.
• Linkable: This means PWAs have a URL, which makes them easy to share, reduces UX friction and eliminates the need for installation.

You may or may not understand all of this jargon. But the important thing is that Russell talks a lot more about usability than he does about specific technologies. Usability is the primary feature of any PWA.

PWA technologies explained

To give a little more context to the PWA features listed above, we need to look at the three technologies that underpin PWA usability. These are Service Worker, Manifest JSON and HTTPS. Let’s take a look at these in turn.

Service Worker

Service workers are, in effect, proxy servers that sit between a browser and a server.

They help to create effective offline experiences. This means users can access the PWA on their device even if they’re not connected to the internet. They just need to have accessed it once before while connected.

Service workers also help to speed up sites, even when a user is connected to the web. That’s because loading local files is much faster than downloading them.

Manifest JSON

Manifest JSON is simply a file which contains information about what a home screen icon should look like. If this file exists, mobile operating systems will ask the user if they want to ‘Add to Home Screen’. If a user hits ‘Yes’, then the icon, short name and app theme/colours are pulled from the Manifest file.

HTTPS

HTTPS allows for the secure delivery of data over the web through encryption. This is especially important because a PWA should be able to accept push data, updating any stored/cached files while connected to the web in readiness for the next time the user needs it.

With this kind of ‘background refresh’ happening, security is crucial. In fact, Service Workers won’t even run without good security in place.

PWA technology might sound a bit overwhelming at first. But — certainly for a web developer — it’s not all that complex. These are simple technical solutions that make a huge difference to user experiences.

PWA vs a native app

So what’s the difference between a PWA and a native app?

Native apps are the kind of apps we’ve been downloading onto our smartphones since smartphones were first invented. These apps are developed for a specific operating system and use a specific software. And — because you have to download them — they take up space on a user’s device.

In contrast, you don’t need to download a PWA. Instead, you access the app via your browser. These apps are developed like a website but designed like a mobile app. They’re also fast, reliable and engaging.

Benefits of a native app

• A native app can integrate with other apps on the user’s device
• It’s easy to publish your app on app stores and process user payment
• Native apps use up less device battery than PWAs
• It’s easy to make native apps secure, with features like two-factor authentication

Benefits of a progressive web app

• PWAs load faster than a native app
• PWAs work across multiple platforms and devices
• It’s cheaper to develop and maintain a PWA than it is to develop and maintain a native app
• Users can easily find your PWA online and share its URL so visibility tends to be good
• Users can access a PWA on a mobile or desktop device — they can also install a PWA for faster access and extra features

Use case examples: native apps and PWAs

Native apps come in useful when you want very different content and features on your app and website.

For example, imagine a manufacturer wants a website that focuses on B2B sales. But they want an app that provides how-to guides and product information for consumers. In this case, to offer a completely different set of content and features, a native app makes good sense.

However, let’s imagine a travel company is looking to improve the mobile booking experience. You want mobile users to browse packages and build itineraries with ease, much like they can on your desktop site. In this case, a PWA is the better option.

PWA examples: how big brands are using progressive web applications

Let’s take a look at how some well-known brands are using progressive web apps. Check out these PWA examples.

Starbucks

Starbucks has a PWA that customers can use to order their coffee. On this PWA, customers can browse the menu and place orders without having to download a new mobile app. This solution is faster than the Starbucks iOS app and offers a simple, streamlined user experience.

Pinterest

Realising their mobile website was on the slow side, Pinterest decided to launch a progressive web app. Visitors now spend 40% more time on Pinterest’s PWA than they did on the company’s mobile website and user engagement has increased massively, too.

Lancôme

Luxury beauty brand, Lancôme, decided to launch a PWA because mobile conversions lagged behind conversions on desktop. They realised that a native app didn’t make sense for casual shoppers so decided on a PWA. Lancôme’s progressive web app helped the company to increase mobile sessions by 50% and conversions by 17%.

Does a PWA make sense for my business?

Progressive web applications offer an excellent mobile experience for your users. It can help to increase engagement and conversions.

So when deciding how relevant PWAs are to your business, you need to consider how important mobile usability is to your business. If the percentage of traffic and conversions on your site from mobile is very low (and you don’t think it should be any higher) then PWA is probably going a step too far.

By all means invest in making your site secure, fast and mobile responsive. These things are all important factors for SEO and conversion rate optimisation. But you probably don’t need to worry about Service Workers, Manifest files or app-like usability features.

On the other hand, if the mobile experience is important to you, then PWA could be a worthwhile investment. It can make a great alternative to a native app because it doesn’t require the same level of content management and maintenance.

Still unsure? If you’re wondering whether a PWA might work wonders for your business, our team is happy to help. We can advise you on the range of technologies and approaches available, helping you find the right solution for your business and customers.

Contact the Radical team today for expert PWA advice.