All you need to know about progressive web apps (PWAs)

...

by Mark de Vos
on

Published by: Luxus Worldwide

Many companies are searching and increasing their demand for new, interactive, and easy to use applications. Where in the past this would mean diverging to native apps like an Android or iOS app, nowadays there is another option—the progressive web application (PWA).

Mobile phones with the PWA logo

A progressive web application is essentially a website that combines the best of web and mobile apps. That means your PWA can be built with popular technologies like React or AngularJS, while also benefitting from the intuitive usability and functionality of a mobile app. This is all possible because of recent advancements in browser technology that enable users to install PWAs on their home screen, receive push notifications, integrate the camera of their phone into the site itself and even use the site offline if necessary.

What makes a PWA a PWA?

Progressive

PWAs work on any browser the user may use. I personally like to call them progressive due to their ability to work as a site on your desktop and as an app on your mobile devices.

Responsive

PWAs scale well on every device that a user can access them on. In other words, users need to be able to read and navigate smoothly through the app on a relatively small device like a phone but also on a large desktop screen.

Fast and small

PWAs should be fast—the average load time is 2.75 seconds! That is more or less eight times faster than the average mobile landing page. This is partly because they are small and use up only KBs of storage, compared with the hundreds of MBs you’d expect from a typical app.

Offline usage or connectivity independent

In order to provide a good user experience PWAs need to work while there is a degraded or even no internet connection, just like with native apps (at least most of them). In order to achieve this you can use an offline or cached version of the page. The browser should never show an error message decrying the lack of connection.

Service workers (little bits of code constantly working in the background) allow apps to remain working while connectivity is lost. The big advantage of this is that service workers can be used for other purposes like listening to push notification events and synchronising data in the background. The latter is useful should the user fill in data while offline. The PWA stores the data locally and simply synchronises with the server as soon as an internet connection is established. All of this is handled in the background, with the user experiencing zero degradation of service.

Though offline is a fantastic feature for stability and user experience, it only counts for 1-2% of your website traffic on average. Hence it’s always worth considering how far to integrate your offline functionality.

App-like interactions

Your PWA should feel like an app, meaning the interactions simulate app behaviour. This can be achieved by building in swipe interactions or animated page overflows. Page refreshes should be kept to a minimum.

Always up to date

Due to its service workers, PWAs are always up to date with the latest content and functionality. No need for users to update the app themselves

Discoverable

Since PWAs are websites, they are indexed by search engines and can be optimised for SEO. This is a major advantage over native apps which can only be found via their respective stores.

Incentive to use again

Just like with native apps, push notifications increase the engagement significantly. This can be up to 88% of app relaunches.

Installable

Compatible browsers will automatically show popups or indicators that allow the user to install the app on their phone. By adding an icon to the user's home screen, they can quickly launch the app without having to navigate via the URL or a bookmark.

Why would I build a PWA for my business?

Increased adoption

Users are encouraged to install the PWA on their home screen by a simple prompt when they click on to the live web page.

It is known that users rarely install new apps on their phones nowadays, which requires a process via the app stores and consumes a lot of storage space on the phone. Both of these issues are resolved with a PWA, since installing it is done with one click after visiting the site and the size is significantly smaller than a native app.

Native apps also require the user to keep it updated which isn’t the case with PWAs. They are updated in the background without disrupting the user’s experience.

Boost user engagement with push notifications

Push notifications help keep users engaged. Normal sites do not offer this functionality but PWAs do just like native apps.

Push notifications grab the attention of your users and are typically a call-to-action encouraging the user to purchase your product or read your latest content, which may trigger instant action from the user.

Statistics show us that once an app is installed the likelihood of opening that app again is small, with 90% of users opening an installed app once and just 16% opening it more than twice. Push notifications are a great way to attract traffic back to your services.

Reduced development costs, faster innovation, and continuous delivery

The need for a strong digital presence is well known and it is not uncommon for businesses to support a website, as well as iOS and Android applications—that’s already 3 codebases to develop and maintain.

A PWA can combine all 3 into a single codebase or team. This greatly reduces development and maintenance costs. Plus, development teams working on native apps are usually more costly than those working on websites or PWAs.

Other teams like marketing, analytics etc. all benefit from reduced time to market, consistency in messaging and experience across the board and less time spent optimising for specific systems.

Excellent performance

Speed is always in high demand and while 5G exists it is certainly not accessible to the majority of mobile users around the world. This is where the lightning fast speed of PWAs really shines.

The caching technology PWAs utilise is capable of loading pages instantly. No amount of website optimisation can compete with this. The average loading time of web pages on mobile on 3G networks is 19 second and on 4G it’s 14 seconds. This is way too long for most users.

Increased conversion rates

Great design and user experience will always improve conversion rates on any device, no need to argue that. The smoother the experience is for the user, the easier it is for them to reach their goals and deliver increased conversion.

With that in mind, it's no surprise that the conversion rates on PWAs typically show higher numbers. Loading time is faster (in most cases instant) and they don’t consume much device storage space. Users also don’t need to worry about updates as that is all done in the background.

The strengths of PWAs can really improve your conversion numbers and will create happy users that continually return to your product or service.

Use cases

Starbucks

Starbucks progressive web app and Starbucks native app

Starbucks was one of the first on the scene when the company introduced a PWA via app.starbucks.com. The idea was to enable customers to view the menu offline and be ready to order as soon as they were online (for payments a connection is necessary of course). This is a very good example of how a PWA can be leveraged to help users with intermittent connection.

Plus, the size of the app dropped to 244 KB from the 143 MB iOS version, a whopping 99,84% decrease.

Starbucks claims their PWA has been a massive success, stating that it offers a fast, integrated, reliable and engaging experience. This resulted in doubling the number of web users who place orders each day, with desktop users now ordering at about the same rate as mobile users.

Uber

Though for most this may come as a surprise, but Uber has a PWA. They decided to rebuild their website based on PWA technology to offer a similar smooth experience as exists in their native app. The main focus was to support markets where low-speed, 2G networks are predominantly present.

Uber progressive web app

Installing the 50KB PWA for Uber takes 3 seconds on a 2G network and offers the same experience as the native app. This allows users with limited internet connections and phones which may not be compatible with the native app, to still user the service. Uber was able to open completely new markets as a result.

Konkretly

Konkretly.com is a PWA built by Luxus. The service is aimed at reviewing properties before purchasing them, using questionnaires to help aid buyer decision-making. There is even a paid review option where experts make use of the PWA to review the property with more advanced tools.

Konkretly progressive web app

So what makes this a PWA? The site is fast and small and acts more like an app when used on your phone. You can install it on your device and still answer questions offline, which can be useful if you’re currently exploring the basement of a potential new home without a connection.

So what’s next for PWAs?

Well, as usual, there is no straightforward answer. Here are a few questions to consider:

  • What is your budget? PWAs tend to have lower building costs than native apps
  • Are you considering building a native app? Does it have to be a native app per se?
  • Are you renewing your website?
  • How is your traffic distributed, is most of it coming in via mobile?
  • How is your current performance and conversion?

It is definitely not a case of one or the other, meaning you either build a native app or PWA, in fact PWAs should be thought of as yet another option in the ecosystem. There are many advantages to PWAs which will elevate user experience and conversion and are therefore certainly worth the consideration.

If you are looking for advice on your own PWA strategy or are ready to build one get in contact with our team and we’ll gladly help you out!