De Voorhoede

front-end developers

De uitdaging: Inspecties uitvoeren zonder internet

DLR inspecteert en adviseert in liften, roltrappen en andere transportinstallaties. Vóór ons project werden inspecties ingevoerd via een native Android-app op een Samsung tablet. Door de wijze waarop de app was ontwikkeld, duurde het genereren van inspectieformulieren even. Ook het synchroniseren met de server leek onbetrouwbaar en duurde soms erg lang. Wij wilden deze problemen oplossen met een website. Websites leven, zou je denken, per definitie online. Maar op DLR’s inspectielocaties is vaak geen, of slecht internet. Hoe zorgen we dat offline zijn geen belemmering is om het werk goed te kunnen uitvoeren?

Wacht!
We organiseren een Progressive Web Apps Masterclass op , waarin we aan de slag gaan met de technologie die in deze case besproken wordt. Schrijf je meteen in, want de beschikbaarheid is beperkt.

De oplossing: een progressive web app met background sync

Omdat we al ervaring hadden met het ontwikkelen van offline first webapplicaties was de keuze voor een Progressive Web App (PWA) snel gemaakt. Met een PWA kun je technologie gebruiken die voorheen alleen voor gewone apps beschikbaar was. Het voordeel is dat je PWA niet in een app store moet worden gekocht, maar gewoon als website kan worden geopend en onderhouden.

Om de web-app een herkenbaar en app-y uiterlijk te geven kozen we voor React in combinatie met een Material Design bibliotheek. Material Design is een animatie- en interactieframework ontwikkeld door Google: hetzelfde dat al op de tablets van de inspecteurs voor het besturingssysteem en andere apps wordt gebruikt.

Screenshot van de DLR Connect PWA
DLR Connect overzicht met een uitgeklapte weergave van de inspecties die voor woensdag zijn gepland

Een inspecteur kan na het inloggen alle geplande inspecties per week in één keer downloaden. De inspecties worden door de PWA opgeslagen zodat er daarna geen verbinding met internet meer nodig is. Afgeronde inspecties worden op de achtergrond automatisch verstuurd, zo gauw er een internetverbinding is gedetecteerd. De inspecteur kan zich volledig richten op zijn werk en hoeft zich nooit meer zorgen te maken over de kwaliteit van het netwerk.

De technieken

  • Een Progressive Web App met lokale caching en background sync om offline te kunnen werken

  • React met een Material Design bibliotheek voor een herkenbaar uiterlijk

  • Een front-end server die de API van DLR op maat snijdt voor de web-app

Het resultaat

  • Digitaal inspecties invoeren en opslaan in internet-arme omgevingen

  • Efficiënter werken met vertrouwen in de technische oplossing

  • Wandelgangenrating onder inspecteurs van 4,5 ster