What is a Progressive Web App (PWA) and should you be building one?

Date:
16/01/2020
Author:
Henrietta Curtis
Reading Time:
9 minutes

They have been described as more engaging and more reliable with better, faster performance, but what exactly is a Progressive Web App and how can the financial services industry use them to improve customer experience?

Progressive Web Apps are a next generation web based alternative to the traditional device-specific (native) mobile apps that we are familiar with. They allow you to build something that looks and feels just like a mobile app (with a few differences which we will discuss), but using pure web based technologies. Their killer feature is that, just like a native app, they can work offline.

A bit of history

When Apple launched its iPhone, the original intention was for all third party apps to be web based. However, at the time, the user experience of native apps was much better than the experience of the web apps and mobile data speeds and reliability were not quite ready to support the web based alternative. Following much frustration from developers and users alike, Apple launched the App Store which allowed anyone to build and launch a native mobile app, and so the development of web apps fell away.

Fast-forward a few years and web technologies, together with mobile data speeds, eventually caught up with consumer expectations. Improvements in various technologies and the addition of responsive web design allowed the user an enhanced interactivity, similar to that of the native app. In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “progressive web apps” and Google put significant efforts into promoting PWA development for Android.

Difference between PWAs and standard websites

Whilst very similar to a website, (PWAs are deployed to servers, indexed by search engines and accessible via a URL), for a site to be considered as a PWA, it has to meet certain rules and requirements:

  • Progressive - It must be built with progressive enhancement at its core and therefore should work for all users on all browsers.
  • Re-engageable - It should include push notifications to make re-engagement easy.
  • Responsive - They adapt into any form, whether that be desktop, mobile or tablet.
  • Fast - They need to be able to work offline or with limited connectivity.
  • App-like - Use the app-shell model to provide app-style navigation and interactions.
  • Fresh - Refreshes after each content update so it is always up-to-date.
  • Installable - It should allow users to store apps on the home screen of their device.
  • Linkable - A URL that can be shared easily with a link that automatically launches

So rather than being one piece of technology, a PWA is more a set of standards, functions and methodologies that take websites, as we know them, to the next level.

Service Workers - small technology, big difference

The biggest evident difference between an app and a website is that generally, most apps have at least some functionality whilst not connected to the internet, whereas a website typically does not.

So how does a PWA tackle this problem? Despite utilising existing website languages and technology, it works offline thanks to a new technology called ‘service workers’ which have been a game changer for PWAs. They can prefetch and sync data with a remote server, enabling push notifications which gives them the key likeness to native mobile apps that we are accustomed to. So after your PWA has been added to the homescreen, it can load instantly and be used offline or in poor network conditions. 

Did you know that 53% of users will abandon a site if it takes longer than 3 seconds to load? With this statistic in mind, it is easy to see how powerful service workers are in transforming our web experiences via a PWA.

How PWAs compare to native mobile apps

Not only are PWAs a big step up from the standard web page, but they actually offer several other benefits in comparison to the native mobile app:

  • Lower launch cost - Building directly onto your website means you no longer need to invest in one team of Android developers and one team of iOS developers. So with half of the investment and one set of simple web technologies (such as HTML, CSS and JavaScript) it is possible to have a mobile experience that works on almost all devices.
  • Accessibility - Studies have shown that, on average, a native app loses 20% of its users for every step between the user’s first contact with that app and when they start to actually use it. With the lengthy multi-step download process that exists with native apps, this can equate to a lot of users. Comparatively, as users will be able to use a PWA as soon as they locate it, they can engage straight away and there should be less of a drop off. Additionally, since PWAs are not device specific, they can be accessed from a larger number of devices and, furthermore, as PWAs do not need to be downloaded, the storage space barrier is also removed. Put simply, they have a much larger potential audience than a native app.
  • Marketing - As a PWA can be shared via a URL, all the marketing tools that are available to you for a standard website (retargeting, Search Engine Optimisation (SEO), Pay per Click (PPC) etc.) are also available for PWAs. Coupled with an existing domain name brand awareness, they can be promoted and shared on multiple channels with huge visibility.
  • Lower ongoing cost - native mobile apps have a drawn out approval process and therefore maintaining them isn’t always easy. PWAs are usually much more cost effective as the developer talent pool is bigger and you also don’t have to pay commissions to the device vendors (for paid apps). Likewise the internal processes are streamlined as all your updates are made immediately.

There are, however, some limitations and downsides to PWAs compared to native apps. For example:

  • Battery usage - PWAs generally consume more battery power than a native app, as they are written in high-level web code, meaning the phone has to work harder to interpret the code.
  • Limited browser features - While all of the major browser and device vendors now support PWAs, they do not yet offer complete access to all features on the device, which native apps can access. For example, PWAs cannot access a device’s Bluetooth, ambient light, advanced camera controls, contacts and proximity sensors.
  • Limited functionality - There may be some functionality that is critical, but that is not yet available on all browsers. If this is the case, you may decide that native apps are most suitable for your business as this will give all customers the same experience.

Application of PWAs in Financial Services

By the beginning of 2019, Google’s Chrome, Microsoft’s Edge and Apple’s Safari browser all supported PWAs. But where can they take the FS industry in 2020?

Gartner research has predicted that by this year (2020) Progressive Web Apps will replace 50% of consumers facing all native Apps.  With stats showing 40% higher engagement rate and with users spending 3 times more time on a PWA than a regular website, the benefits are clear.

Combining the best of web and native mobile app experiences, coupled with the fact that users reliance on their smartphone is at an all time high (and seemingly heading in only one direction), firms should take advantage of these benefits now and ask how their business strategy could benefit from including a PWA, before their competitors do.

If companies like Uber, Twitter and Instagram are all on board, it is clearly worth taking note of this emerging technology. The lower development and maintenance costs (compared to native apps) and therefore decreased barrier to entry, should ultimately lead to increased competition and better overall experience for consumers.

Examples of Progressive Web App

Twitter Lite 
While obviously not a financial services example, the launch of Twitter’s PWA shows the momentum building for this technology. The PWA rivals the performance of native apps but requires less than 3% of the device storage space compared to Twitter for Android.

Financial Times
The Financial Times abandoned their native apps in favor of a PWA available at app.ft.com. The PWA can be saved to a device’s home screen and users can save articles to read offline.

Starbucks
The Starbucks PWA allows customers to browse the menu, customise their orders, and add items to their carts, even if they aren’t online.

Uber
Uber retired its Windows 10 app last year, replacing it with a PWA instead which is available at http://m.uber.com. This is an interesting example of PWAs being rolled out primarily to replace a desktop application.

Settled.co.uk 
Digital Estate Agent, Settled.co.uk, launched a PWA version of their “Hub” App, which means that when users visit via their browser, they find a fast app-like user experience. When they come back, it loads nearly instantly, even on poor mobile networks.

Trivago
In an interview with Google, Tom Dwyer, Project Lead for PWA and Front-End Developer at Trivago commented that “mobile users who experience the seamlessness of PWAs will quickly come to expect sites to just work, regardless of flaky wifi or poor mobile reception.”