fbpx
Marketing Week

A marketer’s guide to progressive web apps

By August 29, 2019No Comments

Progressive Web Apps

A progressive web app, or PWA, is a website with the look and feel of, and much of the same functionality as, an installed application on a desktop PC, tablet or smartphone.

While often thought of as a mobile-only innovation, PWAs are seeing increasing support and adoption on desktop, aided by efforts from Microsoft and Google to promote the creation of progressive web apps and encourage best practices.

Initially adopted by a handful of publishers, social networks, ecommerce brands and tech companies, PWAs are now in use by hundreds of brands in sectors from beauty to travel, retail to entertainment, and are being touted as a must-have for ecommerce companies and retailers in particular.

What is a progressive web app?

The term ‘progressive web app’ was coined in 2015 by Google Chrome engineer Alex Russell and front-end developer and designer Frances Berriman. It was used to describe an evolving class of web apps that were lightweight, responsive, could work offline, and could be linked to and discovered by search engines as well as ‘installed’ to a user’s home screen. In other words, they combined some of the best features of both apps and websites.

Although PWAs have been heavily pushed and promoted by Google, they aren’t a Google innovation. However, Google has made it something of a company mission to support and develop a set of unified standards for PWAs, and there are considerable benefits to building a PWA to Google’s standards.

Numerous Google I/O developer conferences have shone a light on progressive web apps and their advantages, and Google has published a number of PWA case studies to the Google Developers blog. Google also hosts a directory of progressive web apps.

Microsoft is also keen to support the creation of progressive web apps. In April 2018, it began approving and publishing certain PWAs to the Microsoft Store, and has encouraged developers to either submit their PWA manually or meet a set of criteria that would enable Bing to automatically index it in the store.

Apple, on the other hand, has been slower to support progressive web apps, but finally added support in iOS 11.3 for service workers, a key functionality that allows PWAs to work offline and enables push notifications.

What can progressive web apps do?

As mentioned a little earlier, progressive web apps combine the look and feel, and much of the functionality, of an installed app with the flexibility and discoverability of a website. Here is the list of baseline requirements that Google specifies for a progressive web app:

  • Served over HTTPS
  • Responsive on tablets and mobile devices
  • Loads offline
  • Provides metadata that will prompt the user to add the PWA to their home screen or desktop
  • Loads quickly (under 10 seconds) with “snappy” page transitions
  • Works across all major browsers
  • Each page has its own unique URL

Microsoft specifies largely the same requirements for PWAs to be indexed by Bing, with the addition that they shouldn’t violate any laws or Microsoft Store policies.

In practice, this means that PWAs are web experiences that are fast, secure, responsive, can work offline without a time-consuming download, and can be saved to a user’s homepage or desktop for quick access. They can be crawled and indexed by search engines, and individual pages can be shared and linked to.

Progressive web apps also offer functionality that was previously restricted to native apps, such as push notifications, video capture, and making payments (via integration with payment apps like Paypal, Alipay and Samsung Pay).

PWAs: not just for mobile

Progressive web apps are often thought of as being mobile-only, largely due to the fact they had much better support on mobile in the early years. PWAs do make for an excellent mobile experience with their responsiveness, fast load time and offline functionality, which is why so many brands have built a progressive web app as their mobile site.

However, PWAs were never intended to work only on mobile. As early as 2017, Peter O’Shaughnessy debunked the myth that PWAs were “a mobile thing” on the Samsung Internet Developers Medium blog by pointing out that they could be used on ChromeOS and DeX – a dock that turns a smartphone into a desktop experience – and even in virtual reality.

The following year, PWA support was introduced to Safari 11.1 (and also iOS 11.3) in March, Windows 10 in April, and Chrome browsers running on ChromeOS, Linux and Windows in October (Mac support followed in January 2019). At the time of writing, the only major desktop browser that doesn’t appear to support PWAs is Firefox – though they are supported on Firefox for Android.

This means that any PWA that was built for mobile will also work on desktop without needing any additional modifications, although some may not have been designed with a desktop experience in mind.

What do progressive web apps look like in action? Some brand examples

Progressive web apps have been adopted by a wide variety of brands, some of which were early adopters, while others have joined the bandwagon more recently as support and resources for building PWAs have increased. Here are some progressive web apps in action from brands of various sectors and sizes.

Infobae

Infobae PWAInfobae is a major digital-only, Spanish-language Argentinian news site. In 2017, the publication reported a 230% increase in the time spent on its mobile site after rolling out a progressive web app with the aim of improving mobile engagement.

According to a case study on Google Developers, mobile accounts for more than 70% of Infobae’s traffic. But the publisher was seeing far less engagement with its mobile site than its desktop site, with readers spending an average of nearly 27 minutes per session browsing on desktop, versus just three minutes on mobile.

The new PWA also “dramatically lowered” bounce rates to just 5%, down from 51% on the old mobile site, and brought in three times more page views per session.

Twitter

Twitter introduced its PWA, dubbed ‘Twitter Lite’, in a 2017 blog post. Twitter Lite can be accessed at mobile.twitter.com, making it the default Twitter experience on mobile browsers.

Twitter’s progressive web app is pleasingly fast and smooth, with a streamlined interface that often feels less cluttered than the native Android app. The vast majority of Twitter’s usual functionality is present: the main features that seem to be missing are the ability to shoot photo and video directly within a draft tweet, the ability to copy an individual tweet link via the tweet drop-down menu, and the individual tabs (News, Sports, etc.) within Twitter’s Explore section.

The Twitter PWA is evidently designed with mobile in mind, making it a slightly odd browsing experience on a desktop; but again, the interface is uncluttered, and all of the essential functionality is present, making it a solid option for any users who would prefer an “app”-like experience on desktop, perhaps for browsing in a narrower window.

Hobbycraft

Arts and crafts retailer Hobbycraft launched a progressive web app in early 2018 to optimise the experience of browsing and purchasing from its site on mobile. The PWA was built with Mobify, a mobile shopping platform designed to help enterprise retailers create mobile-adapted websites.

It offers features such as slider menus, attractive category icons, slick store finder and convenient filters. Mobify claims the new PWA netted Hobbycraft a 30% increase in mobile revenue, with a 26% increase in mobile transactions.

The benefits for ecommerce

The mobile shopping experience can be a challenge for retailers to master, which is why many have emphasised the importance of progressive web apps for ecommerce in particular. In 2016, a Think With Google blog post reported that 40% of shoppers would abandon a page that took more than three seconds to lose, yet at that time, the average US retail mobile site loaded in 6.9 seconds.

A good progressive web app with a focus on speed and smooth browsing helps to ease users towards checkout without interrupting their journey, while its offline functionality enables users to browse and gain inspiration on mobile even when connectivity is poor.

Commenting in Econsultancy’s Digital Marketing Outlook 2019 report, Stuart McMillan, deputy head of ecommerce at shoe retailer Schuh, has suggested retailers should layer PWA features onto the foundation of a mobile-first, responsive website, allowing them to save costs and develop with more agility.

“The future looks like a mobile-first responsive website, with progressive web app features layered on top,“ he says.

“The major benefit of this strategy is that it can simplify your development pipeline, which may represent either a significant cost saving or the opportunity to move even faster with delivering innovation. Maybe you could half your time to market for every new feature? What extra revenue might this be worth?”

The following diagram illustrates how this system could work in practice:

Image by Stuart McMillan

“I see websites as layers, where features and functionality are built on solid basics,” McMillan adds. “So, don’t rush to get to all-PWA, give yourself time to get your house in order. Make sure your foundations are solid for growth.”

Are there any downsides to progressive web apps?

Many of the commonly-cited downsides to PWAs no longer apply in 2019: for example, limited browser and cross-device support has given way to broad support from all major browsers on Android and iOS, on mobile and desktop.

Another drawback of progressive web apps has previously been that they don’t appear in app stores, potentially impacting their discoverability and perceived legitimacy, but this has also begun to change with Microsoft including PWAs in the Microsoft Store and promising to treat PWAs as “first-class app citizens”.

Progressive web apps have benefited considerably from vocal support from Microsoft and Google, two major tech heavyweights, and now Apple is increasingly coming around to supporting them as well.

Progressive web apps could enable brands that have never considered developing a desktop app to move into that space with relatively little additional effort.

Progressive web apps do still suffer from being quite decentralised, with no single index to bring them together; as previously mentioned, Google does host a directory of PWAs, but it isn’t at all obvious how often this is updated or what the criteria for inclusion are, if any. Similarly, the Microsoft Store doesn’t index every single PWA.

PWAs can be crawled and indexed by search engines, one of their major benefits, but it isn’t always obvious to the user that they’re encountering a progressive web app, unless the creator has programmed a prompt to appear that encourages them to pin the PWA to their home screen or install it on desktop. This can prevent users from taking advantage of PWAs’ app-like functionality.

As support for progressive web apps on desktop is also relatively recent, most PWAs are also still designed primarily for mobile, which can make the experience of using them on desktop quite limited (an interesting reversal of the usual status quo).

Now that desktop support for PWAs is well-established, it will be interesting to see whether brands decide to take advantage of it to develop fast-loading, app-like experiences for desktop, or promote usage of their existing PWAs on desktop devices.

While mobile is in the ascendancy, desktop is still an important channel (e.g. for capturing users during business hours), and progressive web apps could enable brands that have never considered developing a desktop app to move into that space with relatively little additional effort.

The post A marketer’s guide to progressive web apps appeared first on Marketing Week.

Copyright © 2019 Phvntom Inc.
All Rights Reserved.