Progressive Web Apps: What's All the Noise about?

Posted by Lizzie Dean on Sep 11, 2017 2:51:25 PM

PWA_Hero.jpg

Until recently, there were two widely accepted methods for securing your very own patch of the World Wide Web: a website, and/or a native app. However, since around 2015, when they were proposed by Google, Progressive Web Apps (PWAs) began to allow websites to go offline, incorporate push notifications and generally make the internet a better place.

Described by Google as "Radically Better Web Experiences" and by others as "Websites with Special Powers", we take a look at what the buzz is all about:

the definition

A PWA offers your users a deeply engaging experience the second they land on your site from their mobile device. Instead of taking the high-friction step of downloading a native app, PWAs provide a native-like experience from the web. Housed within your browser, displayed as a website, they are built using web technology but they look and feel like an app.

WHAT'S IN IT FOR BUSINESSES?

Traditional app development requires the creation of multiple apps across multiple mobile platforms. With the PWA however, separate code bases are not required. It's more cost-efficient due to the development of a single app across all devices and platforms. Audience reach is maximised as all platforms are covered with minimal effort involved. No installation means better audience retention (stats show that user drop-off is at 20% during the native app installation process). Remember, the aim is not to get the user to install your app, but to use your service. Check out Forbes' recent video explaining how their PWA changed the way they serve their audience and the results they've seen.

what's in it for the user?

Using service workers (scripts that allow features like push notifications and background sync, even when offline), PWAs will load almost immediately, regardless of the state of the user's network connection. The user experience is smooth (e.g. easy scrolling and navigation). Banners inviting the user to add the PWA to their home screen make it simple to launch and return to the PWA. Push notifications, an effective way of re-engaging with an audience, are easily implemented. And it's securely served over HTTPS. 

LEGACY CONTENT

Google believes the PWA offers an opportunity for the web to "sort through" legacy content. Because the internet has evolved so quickly, historical content remains which was not designed with the mobile user in mind. PWAs could therefore provide a chance to reset expectations of what user experience should be. Potentially, PWAs offer a kind of content spring-clean for the internet.

google's "feel-good principles" for ux

During their research and working with mobile web developers building PWA's, Google came up with three main principles for ensuring users feel good during a web experience:

1. Reactive
2. Predictable
3. In Control

Some of the points below are specific to reactive PWA design and some are universal UX design truths, and include a few examples of how developers around the world are making the internet a better place using PWAs: 

1. rEACTIVE

Transition Time Perceptions
Ever tapped an image on a listing page, only to wait for an indeterminate amount of time to transition to the detail page? 'Skeleton screens' will load the information already used (e.g. image and title) and begin to build an outline of the screen whilst the download is happening, reassuring the user that things are moving along at a good pace. Research has shown that engagement increases dramatically using this method.

Scrolling Glitches
Scrolling infinitely through a list can be problematic on mobile, with the lists often rendering blank. They can also use huge amounts of memory. 'Virtualised lists' will only render those items on the screen, plus a few on either side. So regardless of the number of elements, you can scroll fast. As a particularly heavy-hitting example, check out Twitter's PWA, Twitter Lite. Taking up less than 1MB, this PWA is described as a "faster, data-friendly way to see what's happening in the world right now".

Load Performance
PWAs will ensure resources are being loaded and re-used effectively, often using service worker caching (particularly useful when the user revisits the site with resources readily available on the device). 

Server Side Rendering
Instead of downloading an entire site's resources in the first request, slowing the process down considerably, this method will render the PWA's first view on the server and then the remaining content is "hydrated", or sent down to the user later.

2. Predictable

In User Experience terms, predictability is key. Steve Krug wrote in his book "Don't Make Me Think", to ask yourself if users can answer these questions:

"Where am I?"
"How did I get here?"
"What can I do here?"
"Where can I go from here?"

Simplicity is key. Currently, popular thinking favours "bottom navigation" over the hamburger menu for PWA design as it's more discoverable - the user can clearly see what's on offer.

3. In Control

Your user should always feel in control of their experience. Ever loaded an article and it moves around all over the screen while you're trying to read it? That's called an "unstable load" and puts your user firmly in the 'not in control' camp. With a "stable load", the browser already knows how to lay everything out on the screen. Another area where the user may not feel in control is permissions. Asking if your user would like to receive push notifications when they've just landed on your home page, which probably also contains various calls to action, isn't a great idea. Twitter provides a great example of this request in context: once a user taps the notifications tab, if they haven't already allowed notifications, a full-screen overlay appears asking if they'd like them. 

So, as you can see, there is a real case for progressive web applications in a lot of situations, and the momentum is gathering. If you think your online offering could be enhanced by adopting this technology, get in touch. We'd love to talk about whether a PWA would be the right move for you. 

Topics: Digital Strategy, Digital Trends

Get regular updates on all Terabyte stuff!

You know you want to.

Here at TeraHQ we're constantly talking about digital and quite often we write some of that stuff down. Sign up here to get the lowdown on what's happening in the Wonderful World of Web...

Sign me up!

Recent Posts