How to Use Progressive Web Apps to Build a Modern Mobile Web Experience

DZone 's Guide to

How to Use Progressive Web Apps to Build a Modern Mobile Web Experience

Most people interact with the internet as much, if not more, through their phones than their computers. Learn how to adapt by using PWAs.

· Web Dev Zone ·
Free Resource

Designing a website which optimises user experience is a key consideration for consumer engagement and retention. Today, an increasing number of people are accessing the web through their mobile devices, so building a mobile web experience which is fast, reliable, and engaging is paramount for businesses. While many established companies and start-ups alike use native apps in addition to, or instead of, a website, Progressive Web Apps (PWAs) offer a mobile and desktop web experience that has faster loading times, uses less data, works in any network state, and engages users by immersing them in the experience. Below, Dean Hume, Chief Technology Officer of UK property tech startup, Settled, explains how PWAs can deliver strong efficiencies for businesses.

What Are PWAs?

PWAs are a set of features that leverage new, open web application programming interfaces (APIs) to offer a mobile web experience that loads fast, uses less data, and re-engages with users in multiple ways. Mobile network coverage in the UK is pretty good, but even 4G can be flaky at the best of times. PWAs allow consumers to access a web app whilst offline and also enable them to see features on the go.

What are the benefits of PWAs?

  • Easy installation: PWAs are built into the fabric of the web and are installable without the need for an app store.

  • Suitable for all mobile devices: PWAs are responsive and websites designed as a PWA can be optimised for any mobile device.

  • Quick access to data when offline: Service worker caching makes it possible to cache the results of relevant network requests, allowing quick access to data even when the user has limited or no connection. These apps also pre-cache key resources, to reduce network dependence.

  • Less data downloaded and improvement to page load times: Google’s Service Worker Toolbox provides common caching strategies for dynamic content, meaning that once a user has visited the first page on the dashboard, they had all of their resources cached allowing for easy and fast visits to other pages on the site. This means that user can have a fast and engaging experience as soon as they land on the website.

  • Longer engagement with the website: PWAs allow for visuals to be delivered faster, which increases the time consumers spend on a website. PWAs also make user re-engagement easy through features like push notifications.

Settled is an online property platform that enables customers to buy and sell properties in a transparent, efficient, and straightforward way. As more than 50% of traffic to the Settled website comes via mobile devices, we used PWAs to improve the mobile user experience as well as to provide users with a quick, accessible, and easy-to-use way to manage property transactions.

We built a PWA for our user dashboard, or the Settled Hub, where buyers and sellers can easily see the status of their listings, chat with interested buyers and sellers, sign up for legals, mortgages, and much more. 

As this user dashboard is built as a PWA, this has meant that when users visit via their browser they enjoy a fast app-like user experience. When they come back, it loads nearly instantly, even on flaky networks. This allows us to write one code base that works on most devices, reaching more users. The Settled Hub has also been optimised for mobile devices of any size.

Switching to PWAs has delivered strong efficiencies for Settled - we have reduced mobile page load times by nearly 3X, our users spent twice as long on the site and they consumed 15x less data. We are able to offer our users the same experience as a native application with one codebase, which in turn means we are able to release features faster and build a great experience for our users.

progressive web applications, web application development, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}