Herausforderung

Der Händler belieferte Auftragnehmer, Zimmerer und Architekten in ganz Nordeuropa, aber seine alte Website benötigte eine stabile Verbindung, um überhaupt etwas zu browsen. Auf Baustellen mit schwachem 4G luden Seiten sechs Sekunden oder länger und time-outeten oft. Es gab keinen Händlerfinder, also riefen Auftragnehmer die Zentrale an, um zu erfahren, wo sie Material abholen konnten, und Vertriebsmitarbeiter trugen weiterhin gedruckte Kataloge mit sich, weil man sich auf den digitalen vor Ort nicht verlassen konnte.

Lösung

Wir bauten den Katalog als installierbare PWA. Produktseiten, Spezifikationsblätter und Projekt-Referenzen werden beim ersten Besuch gecacht, sodass Auftragnehmer das komplette Sortiment selbst in einem Betonkeller ohne Signal browsen können. Ein Händlerfinder nutzt die Geolokalisierung des Geräts, um die nächsten Lagerhändler zu sortieren, und eine Projekt-Referenzgalerie zeigt echte gebaute Beispiele mit Produktlisten, die Auftragnehmer sofort kalkulieren können. Der Install-Prompt wird nach dem zweiten Besuch angezeigt, damit Nutzer den Katalog zum Startbildschirm hinzufügen können.

Technischer Ansatz

Ein Service-Worker cached das App-Shell und die Produktliste beim ersten Laden; Produktdetailseiten werden on demand abgerufen und anschließend für die Offline-Wiederverwendung gecacht. Ein ~250 KB komprimierter Suchindex wird zur Build-Zeit aus der Produktdatenbank aufgebaut und liefert eine Offline-Suche unter 50 ms, während der Nutzer tippt. Die Händlerdaten werden als statische GeoJSON-Datei ausgeliefert und clientseitig nach Luftlinie sortiert, sodass kein Karten-API-Aufruf nötig ist, um den nächsten Lagerhändler zu finden. Updates rollen über den Service-Worker im Hintergrund aus, ohne den Auftragnehmer vor Ort zu unterbrechen.

Ergebnisse

Innerhalb von sechs Monaten nutzten 65% der mobilen Besuche den Offline-Katalog auf Baustellen mit schlechter Verbindung. Die Nutzung des Händlerfinders stieg um das 2.5x-Fache, da Auftragnehmer ihre eigenen Abholpunkte fanden, statt im Büro anzurufen, und der mobile PageSpeed verbesserte sich von 41 auf 95. Außendienstmitarbeiter trugen keine gedruckten Kataloge mehr mit sich und nutzen die PWA nun auf dem Smartphone in Kundenterminen.