How We’re Using Progressive Web Apps to Shake Up the Property Market
Discover the process behind our new smart dashboard built with Progressive Web Apps
At Settled, we are passionate about improving the process of buying and selling homes. We want consumers to be able to buy and sell their property online in a completely transparent, straightforward and reassured way.
More than 50% of our traffic to the Settled website comes via mobile devices, which makes it one of our primary platforms for discovery. As you’d imagine, we want this platform to be a fast, engaging experience for our users, so we decided to build a Progressive Web App for our user dashboard. If you’ve not heard of Progressive Web Apps before, they are a set of features that leverage new, open web APIs to offer a mobile web experience that loads fast, uses less data, and re-engages users in multiple ways. Mobile network coverage in the UK is pretty good, but even 4G can be flaky at the best of times. We wanted people to be able to enjoy using the web app whilst offline and see features while on the go
Once customers have signed up to our site they are directed to a our Hub (or user dashboard). Here, 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.
Our Hub is built as a Progressive Web 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 flaky networks. This allows us to write one code base that works on most devices, reaching more users.
Under The Hood
Under the hood, we leveraged the power of service workers to allow us to cache the results of relevant network requests, meaning that the data can be accessed quickly or even when the user was offline.
We used Google’s awesome Service Worker Toolbox, which provides common caching strategies for dynamic content, such as API calls, third-party resources, and large or infrequently used local resources. This meant that once a user has visited the first page on the dashboard, they had all of their resources cached allowing for lightning fast visits to other pages on the site.
The great thing about Progressive Web Apps is that they are installable and live on the user’s home screen, without the need for an app store. Using service workers and a web app manifest file, we were able to provide our users with to access the dashboard at the tap of a button.
We wanted to squeeze as much as we could out of our technology and opted to serve requests using HTTP/2. By using HTTP/2’s multiplexing capabilities which deliver even faster web requests via the server when compared to HTTP1.1.
Progressive Web Apps require web requests to be served over HTTPS, and because this is a requirement for HTTP/2, it made it an easy transition to make. By doing so, we noticed that HTTP/2 gave us a super fast time to first meaningful byte, and then once the data had been cached using service workers, our users experienced even faster repeat load times.
Our server side code is written using Node.js and we used the brilliant spdy package to help us get HTTP/2 up and running. If you’d like to get started with HTTP/2, we recommend checking out the spdy Github repo for more information.
This all sounds amazing — but what does it mean for the user? So far we have been impressed with the results. Since launch, we’ve noticed that our users spend twice as long engaging with the site. Due to service worker caching, we’ve noticed 3 times less data being downloaded by users, as well as a huge improvement in our page load times.
Web performance is important to us here in the tech team at Settled. We regularly use the Hub ourselves on our own mobile devices, and understand how frustrating it can be waiting for a web page to load. Since launching the Progressive Web App late 2016, we’ve served hundreds of thousands of web requests and managed to shave off an average of 3 seconds from the page load time.
In order to audit the performance of our Progressive Web App, we use Lighthouse. It is a great tool for auditing, providing performance metrics, and checking best practices for your Progressive Web Apps.
In fact, we are super proud to announce that we get a score of 99 out of 100 when audited using the tool!
If you’d like to try out the web app for yourself, head over to settled.co.uk. We’ll be constantly looking to update and improve the Progressive Web App over the next few months and look forward to sharing the journey!
Oh and we’re hiring ! Check out our site for more information.