Topic:
HubSpot,
Sales Tips
(4 Minute Read)
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:
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:
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!
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.
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:
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.
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:
Slide taken from Miracle's talk at Digital Gaggle.
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:
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!
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 marketing 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
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!
Psst. If you found this article useful, or fancy letting us know how you get on, feel free to tweet us @NoisyMonkey.
Digital Marketing Executive at Noisy Little Monkey, Gertie blogs about Content, Social Media & Analytics
