Progressive Web Apps For Dummies

Posted in Mobile by Gertie Goddard

What is a progressive web app?

A progressive web app is similar to a native application you have on your phone, but will fundamentally still live on the web. Hence, progressive web apps (PWAs) combine the best of the web and the best of mobile apps.

Here’s a video demonstrating what a PWA looks like when installed on mobile:

phone recording


Comparing PWAs to native apps

To truly understand a progressive web app, you have to understand the benefits of native apps first. Just think - why would you use the BBC News app, instead of just heading straight to bbc.co.uk/news in your browser?

It’s all about convenience and ease. Humans are app-aulingly lazy, hence apps make a great shortcut. They provide a smooth and consistent user experience, are fast, quick to respond, and provide cached content. What’s more, apps can access your phone’s hardware (e.g. accelerometer, camera etc.), meaning they are much more interactive & customisable than a website.

BUT, there are some big problems with native apps. Not only are they expensive and exhausting to build (and difficult to get published!), but they require customers to update their phones regularly - which is much easier said than done.

PWAs have none of these shortcomings, whilst still retaining many of the benefits. Here are the key advantages of PWAs over mobile apps:

  • PWAs will work everywhere, and on any browser -  not just iOS and android!
  • PWAs take advantage of a larger web ecosystem, plugins and community
  • They are easier to deploy and maintain
  • PWAs have less steps from first contact to using the app (just think how many hops are needed to install and use a mobile app!)
  • PWAs take up FAR less space on your phone

 

Slide showing how quick a PWA takes to load (150KB home feed load vs 56MB on iOS)
Slide taken from Miracle Inameti-Archibong’s talk at Digital Gaggle showing performance of Pinterest's PWA

Whilst PWAs do not have the level of hardware access native apps have, they still do have some access (which is a huge advantage over web pages) and support for more is in the pipeline!

Still not convinced? Have a look at PWA stats and see how businesses like Tinder, Trivago and Uber benefited from implementing a PWA!

Download Now: Is Your Website Missing These Fundamentals? 

So, what does "progressive" mean in a PWA? Why not just “web apps”? Well, it all boils down to the enhanced experience. "Progressive" means that the app will work with any user, regardless of their environment. All it needs is a browser, and whenever this is self-updated all the new features and APIs will do so automatically in your PWA too. Pretty cool, huh?

You can read more about the pros and cons of PWAs here.

What makes a PWA?

As summarised in this great PWA Roadshow video by Google, there are four main features that are the fiery essence behind every progressive web app:

  • F - Fast
  • I - Integrated
  • R - Reliable
  • E - Engaging
  • S - Secure

Fast

Did you know you can lose 53% of your traffic if your mobile site takes longer than three seconds to load? Just like a website, your PWA needs to be fast. It needs to load like an app, with quick navigation, animations and smooth scrolling.

In fact, Google’s PWA checklist  specifies “PWAs must have a sub 10s TTFI on simulated 3G/first visit on Lighthouse”

Integrated

Your PWA should function and feel like any other native app - be this on desktop, phone or tablet. It should be adaptive and seamless to use, like a great pair of stretchy underwear.

Reliable

The web app should work even when the connection is interrupted, or when there is no connection at all, or the user is in offline mode. A PWA should NEVER show the downasaur! (see service workers - below)

Engaging

Much like a native app, a PWA should be re-engageable. It needs to be able to send push notifications (for example)to remind the user to return to the application.

Secure 

It’s a data minefield out there, so installing an SSL certificate on your server to create the almighty “HTTPS” bodyguard is a PWA (and a website!) must-have.

There are some other important considerations too, although these happen prior to the user even installing it. For instance, it has to be discoverable in search engines & easy to install, but these should become apparent as you make your way through the checklist.

Service workers to the rescue!

In case you didn’t know already, service workers go hand in hand with PWAs. This is because they essentially take your content and save it (via local storage and caching - which is predefined by your developer) and use this to create a seamless experience.

Here’s a neat little demo diagram:

PWAs service workers
Slide taken from Miracle's talk at Digital Gaggle.

Building your first PWA

Fortunately, Google developers have a wealth of useful resources to help you build your first PWA. I’d recommend looking at the following:


Top tip: the main tool for auditing your PWA is Lighthouse (which can be easily added via the chrome store). So a good starting point is generating a report with this - either you or your developer can do this. It’s important to note that most sites don’t get 100/100, but try and draw some useful conclusions from it regardless.

You’ll probably see something like this:

Digital Gaggle PWA audit
Source: Digital Gaggle site

So yes, the Lighthouse tool is useful (albeit a bit daunting) in exemplifying how much work you need to do to turn your website into a PWA.

NB: If your site is a WordPress site, you can get a PWA plugin!

Do you need a progressive web app?

If you expect users to return to your website often, and your website already has an application-like interface, then applying the concepts of PWAs will only make it better. For instance, publishers and social media platforms can really benefit from this. See 9 great examples of companies using PWAs here.

Sound like a good fit for you? Great. However, it’s really important you don’t rush into it. It’s important you are confident with the performance of your website to begin with, before you build a PWA behind the scenes. This is why AMP pages work well with PWAs.

To quote Alex Russel from Google:

AMP: Start Fast

PWA: Stay Fast

From novice to expert

A PWA can fundamentally offer you a low effort, great proof of concept. And this applies to both big and small businesses!

Even a small wordpress ecommerce store can easily implement a PWA via plugin and receive great results, but also other industries too: podcasts, dating, learning software, games, messaging - the list goes on! You can even create a temporary PWA, such as a small brochure site for use during an event, if you don’t feel the need to implement your PWA site-wide.

Hence, it’s time you stopped feeling like a PWA dummy and started having a go! Make sure you have a look at the recommended reading mentioned previously (in this section), and good luck!

New call-to-action

Psst. If you found this article useful, or fancy letting us know how you get on, feel free to tweet us @NoisyMonkey.

Gertie Goddard
Gertie Goddard

Digital Marketing Executive at Noisy Little Monkey, Gertie blogs about Content, Social Media & Analytics

Meet Gertie Goddard

Monkey Mail 💌🍌

Get monthly digital marketing tips sent straight to your inbox.

Want to know what to expect before you subscribe? You can preview the monthly newsletter right here.

Don't worry - we won't EVER share your email with anyone. Even if they offer us a million quid. It says so in our privacy policy.
If you would like to offer us a million quid, email at once.