Understanding the Importance of Progressive Web Apps in WordPress

Mobile-first development is, at this point in 2018, the norm. Unsurprising, since over half of global web traffic is on mobile devices, and the web has to adapt to the demands and expectations of the next billion. After responsive design and ample experimentation with Google’s AMP and Facebook’s Instant Articles, developers are now reaching towards a whole new set of possibilities available via Progressive Web Apps.
Progressive Web Apps (PWAs, as we will call them throughout the post), present a fantastic middle-ground to businesses and developers who are swinging between the need for an immersive experience (provided by a native app) and the budgetary constraints (which are very much a mark against native apps).

What are Progressive Web Apps

Originally developed by Google for the purposes of improving site performance on mobile devices – PWAs just sounds a lot like hyped-up responsive design, right?
Yes, and no. While Responsive is pretty much the norm, PWAs are only beginning to get massive interest because of their capabilities – they can work with many of the device features (like a native app would) in zero or no internet connectivity conditions. Incidentally, these features are also what makes them different from responsive web design – PWAs are single page applications in JS that combine the best of both native apps and mobile web.
Contrary to popular belief, PWA is not a binary state, another variance from responsive design, which a website either is or isn’t. PWA is a score; the higher you rank, the closer you are to the PWA ‘gold standard’ – a super-fast, incredibly efficient, highly engaging construct that keeps users connected to your site and content. You can check your score (on Chrome) via the Lighthouse plugin and go through the detailed reports to see what you’ll need to change in order to make your PWA score better.
One similarity between both PWA and responsive design is that there is no single special framework that must be used to create them, only a set of guidelines that need to be followed. How to follow achieve those results is entirely up to the developer.

How PWAs can change your WordPress Business

For now, let’s a take a look at all the features of PWAs that combine to take the conversions through the roof for any business, and what makes them a perfect layer to add when creating a website:

1. Device Agnostic Performance

While PWAs are touted specifically as something for mobile users, the performance benefits are not exclusive to mobile devices. Unlike AMP, Progressive web apps work on both mobile and desktop, and provide plenty of speed bonus, regardless of device.
This is good news for businesses trying to optimize their websites for higher conversion rates and related KPIs, regardless of the device. It’s an empirical fact that time on site and engagement rates are closely linked to higher conversion, and faster loading speed boosts them all.
Incidentally, a PWA also does away with the need to have a full-fledged app (and the need to present it your visitors via ‘Download our app’ widgets that only bog down your site speed).

2. Works Offline

PWAs can be saved to user’s device home screen, well outside the confines of the browser (provided you remember to ask when the user visits your site, through a web app install banner or “Add to Homescreen” button). As such, they’re already a little closer to the users than the website.
PWAs don’t need a running connection to work; users can access content, and get notifications through service workers (a component of PWAs).
Again, considering the growing number of people who are accessing the web from poorer economies (read: emerging markets), PWAs are a blessing for businesses trying to reach this demographic (which I previously mentioned as the ‘next-billion’). The ability to work around poor and/or choppy connections lets them stay connected.

3. Faster to Develop, Implement, Update

Native apps are a lot more hassle than a business owner, especially one on the small-to-medium enterprise scale, would have the power to consider. Native apps need to be developed separately for each platform (iOS or Android, Windows or Mac, and so on).
This requires a lot of investment on your part into acquiring the right talent and resources to successfully create the app(s) from scratch, updating, and debugging each one of them. Anything for Apple-users will need to be registered on App Store before it is made available to people for download. Any native app will need to measure up to marketplace benchmarks before it is made available to masses of people using that platform.
By contrast, PWAs are created with web programming languages most developers are familiar with – HTML, CSS, and of course, JavaScript. If you have a web developer on your team familiar with these three, it won’t take them a huge leap to familiarize themselves with the principles of creating PWAs and make one for your site.

4. Supported by Major Browser and OS Vendors

Google (and by extension, Chrome) began promoting and adapting to PWAs back in 2015. It’s been 3 years since, and luckily, other browser vendors have declared support for PWAs as well.
For instance, Firefox 58 supports PWA. Web apps are fairly common phenomena in iOS and Safari. Even Microsoft is on the wagon, with plans to add web apps in the Windows 10 app store on all devices by end of 2018.
With support on all major platforms – browsers and OS alike – available, development and testing become a lot easier. Not to mention the audience reach.

PWAs in WordPress

While WordPress’ core application code doesn’t come with a gamut of progressive web app building features yet as other blogging platforms do, the interest is definitely there, helped along with increasing inclusion of JavaScript in the more latest updates.
Several major plugin vendors are developing PWA functionality to go along with WordPress websites. Jetpack, for instance, is working on adding a full range of PWA features to its list of functionalities by 2019. They already support manifest files and lazy loading images, which definitely count as steps in the right direction.
Additionally, there are plugins that provide alternatives in the meantime for WordPress websites to be PWA-enabled. Plugins like:

  • PWA for WP and AMP, which provides PWA-enabled assets like push notifications and app icon loading, service worker, and a web app manifest. As an added bonus, it extends support for AMP enabled sites and is in active development.
  • Super Progressive Web Apps, which can generate a manifest file and lets you add a ‘Add to Homescreen’ button to your website.
  • WordPress Mobile Pack, which is super handy on all fronts, now with added PWA features, although you may have to purchase a subscription to use all the features.

The Upshot

Progressive Web Apps are very aptly named, in my opinion. They combine the best of native apps and world wide web to inform, immerse, engage the users over:

  • Bad connections, thanks to their ability to work offline
  • Any platform or browser, since most of them now support PWAs
  • Any device, because unlike Instant Articles or AMP, progressive web apps are device agnostic and deliver equally well on all screen sizes.

If this single-paged, JS-based application isn’t the face of a faster, more inclusive web, I don’t what is. But enough of me waxing poetic about PWAs and their purported benefits…
What do you think? Could PWAs make a nice addition to your WordPress website? Let us know in the comments below.

About the Author

Susmita is an engineer, a writer and a dancer - not necessarily in that order ! Ever since she discovered WordPress, she has not ceased to be amazed by how this community-driven platform brings people together - in more ways than one. And yes, she loves binge-watching movies !

Leave a Reply

Your email address will not be published. Required fields are marked *