De Voorhoede

front-end developers

The challenge: do inspections without internet

DLR carries out inspections and provides consultancy for lifts, escalators and other transport installations. Before our project, inspections were recorded with a native Android-app on a Samsung tablet. Because of the way the app was designed, it took a while to generate inspection forms. Aside, synchronising data with the server seemed unreliable and could take some time. We set out to solve these problems with a website. Websites, you’d think, are online by default. But the internet connection on DLRs inspection locations is often flaky or missing altogether. How could we ensure that being offline is not an obstruction to do a proper job?

Wait!
We are organising a Progressive Web Apps Masterclass , where we'll discuss many of the topics in this case in depth. Sign up now, availability is limited.

The solution: a progressive web app with background sync

As we were experienced with developing offline first web applications, the choice for a Progressive Web App (PWA) was made easily. A PWA makes it possible to use technology that was previously only available to native apps. The major advantage is that a PWA needn’t be bought in an app store, but can simply be visited and maintained as a website.

To establish a recognisable and app-like appearance, we chose to use React combined with a Material Design framework. Material Design is an interaction and animation framework by Google: the same that is already used on the inspectors’ tablets for its operating system and other apps.

Screenshot of DLR Connect PWA
DLR Connect overview with an expanded view of Wednesday’s planned inspections

An inspector can download all planned inspections for the coming week at once after logging in. The inspections will be stored in the PWA, so that an internet connection is no longer needed. Completed inspections will be sent automatically in the background as soon as an internet connection is detected. The inspector can fully focus on their work, and never worry about the quality of the network again.

The techniques

  • A Progressive Web App with local caching and background sync to work offline

  • React with a Material Design framework for a recognisable appearance

  • A front-end server that implements the DLR API to fit the needs of the web-app

The result

  • Electronically record & store inspections in internet-poor environments

  • Work more efficiently with confidence in the technical solution

  • Unofficial rating among inspectors of 4,5 star