Sprit-Radar: Eine PWA für Tankstellenpreise – warum wir sie selbst gebaut haben
Tankstellen-Apps gibt es reichlich. Trotzdem haben wir eine eigene gebaut. Nicht aus Stolz. Sondern weil sie zeigt, wie ein nützliches Werkzeug aussehen kann, wenn man Tracker, Werbung und Drittanbieter-SDKs konsequent weglässt.
Wer in Deutschland tankt, hat eine echte Auswahl: Pro Stadt gibt es meist ein Dutzend Tankstellen, und die Preisspanne zwischen der teuersten und der günstigsten liegt nicht selten bei zehn Cent pro Liter. Bei einer 50-Liter-Tankfüllung sind das fünf Euro Unterschied – jedes Mal, ohne Aufwand.
Damit das überhaupt sichtbar ist, gibt es die Markttransparenzstelle für Kraftstoffe (MTS-K) beim Bundeskartellamt. Sie wurde 2013 eingerichtet und verpflichtet alle rund 14.000 Tankstellen in Deutschland, jede Preisänderung sofort zu melden. Die Daten sind nicht direkt öffentlich, sondern werden über lizenzierte Verbraucher-Informationsdienste verteilt – Apps, Webseiten, Tools. Einer dieser Dienste ist Tankerkönig.de, und der hat seine Daten dankenswerterweise als offene Schnittstelle freigegeben.
Warum dann noch eine eigene App?
Wer im App Store nach „Tankstelle" sucht, findet sofort fünf bis zehn Treffer. Die meisten sind solide. Aber sie haben drei Eigenschaften, die uns stören.
Erstens: Sie sind groß. Eine durchschnittliche Sprit-App im Store wiegt 40 bis 80 Megabyte. Für die eigentliche Aufgabe – eine Liste von Preisen anzeigen – ist das absurd. Der Großteil sind Werbe-SDKs, Tracking-Bibliotheken, Map-Engines und Karten-Tiles, die niemand braucht, wenn er nur die nächsten drei günstigen Tankstellen sehen will.
Zweitens: Sie sammeln Daten. Beim Öffnen werden in der Regel Standort, Geräte-ID, App-Version, Verweildauer, Tap-Verhalten und manchmal auch Kontaktdaten an Werbenetze übertragen. Das steht in den Datenschutzerklärungen, ist also legal – aber für ein Werkzeug, das wirklich nur Spritpreise zeigen soll, ist das überdimensioniert.
Drittens: Sie blenden Werbung ein. Was den Blick auf das eigentlich Wichtige – die Preisspalte – jedes Mal stört. Bei einer Funktion, die Sie zwei Sekunden lang nutzen, ist jede Ablenkung zu viel.
Wir wollten ein Gegenmodell bauen. Klein, schnell, ohne Tracker, ohne Werbung, ohne Anmeldung. Eine App, die genau eine Sache richtig gut macht und sonst nichts.
Sprit-Radar in Zahlen: 30 Kilobyte HTML, eine Konfigurationsdatei, ein Service Worker, drei Icons. Keine Tracker. Keine Werbung. Keine Anmeldung. Datenquelle: offene Schnittstelle der MTS-K via Tankerkönig.de.
Was eine PWA überhaupt ist
Der Begriff „PWA" steht für Progressive Web App. Das klingt sperrig, beschreibt aber etwas Naheliegendes: Eine ganz normale Webseite, die zusätzlich drei Eigenschaften mitbringt.
Sie hat ein Manifest – eine kleine Konfigurationsdatei, die dem Browser sagt, welches Icon, welcher Name und welche Hintergrundfarbe verwendet werden sollen, falls jemand die Seite auf den Startbildschirm legt. Sie hat einen Service Worker – ein winziges Stück JavaScript, das im Hintergrund läuft und Dateien zwischenspeichert, sodass die App auch ohne Internetverbindung startet. Und sie ist über HTTPS erreichbar, was inzwischen sowieso Standard ist.
Mehr braucht es nicht. Sie ist trotzdem eine Webseite, die jeder Browser auf jedem Gerät öffnen kann. Aber wenn jemand möchte, kann er sie auf den Startbildschirm legen, und dann sieht und verhält sie sich wie jede andere App: eigenes Icon, eigener Splash-Screen, kein Browser-Rahmen, im App-Switcher zu finden, offline funktionsfähig.
Der Charme dabei ist: Es gibt keinen App Store dazwischen. Sie sehen eine Seite, Sie tippen auf „Zum Home-Bildschirm", und es ist eine App. Updates passieren beim nächsten Öffnen, ohne dass jemand etwas tun muss. Es gibt keine Versionsnummer, kein „bitte aktualisieren", keine Wartezeit auf App-Store-Reviews.
Was Sprit-Radar konkret macht
Beim ersten Öffnen fragt die App einmalig nach dem Standort. Danach zeigt sie eine Liste der Tankstellen im gewählten Umkreis – per Voreinstellung fünf Kilometer, einstellbar zwischen einem und 25 Kilometern. Drei Spalten pro Tankstelle: Super E5, Super E10, Diesel. Die jeweils günstigste Tankstelle pro Sorte ist orange hervorgehoben.
Per Tipp auf eine Tankstelle öffnet sich die Routenführung im jeweils installierten Karten-Programm – Google Maps, Apple Maps oder OpenStreetMap-Klient. Die App selbst zeichnet keine Karte, denn das wäre ein erheblicher Mehraufwand für einen geringen Mehrwert: Wer den Weg zur Tankstelle braucht, hat vermutlich sowieso eine Karten-App, die er bevorzugt.
Drei kleine Bedienelemente reichen: Spritsorte umschalten, Sortierung wechseln (nach Preis oder Entfernung), Aktualisieren-Knopf. Das war's. Wer es noch genauer braucht – größerer Umkreis, manueller Standort – findet das in den Einstellungen hinter dem Zahnrad.
Was unter der Motorhaube läuft
Wer einen Blick in den Quellcode wirft, sieht: Es ist wirklich nicht viel. Eine HTML-Datei mit eingebettetem CSS und JavaScript. Ein JSON-Manifest, das dem Browser sagt, wie die App heißt, welches Icon sie hat, welche Farbe der Splash-Screen bekommt. Ein Service Worker, der die Dateien zwischenspeichert. Drei PNG-Icons in den vorgeschriebenen Größen.
Beim Aufruf prüft der Browser zunächst seinen Cache und zeigt sofort die letzte bekannte Version – das macht den Start schnell. Im Hintergrund fragt der Service Worker nach, ob es eine neuere Version gibt. Falls ja, wird sie heruntergeladen und beim nächsten Öffnen aktiv. So fühlt sich die App immer schnell an, auch bei langsamer Verbindung.
Die eigentliche Datenabfrage läuft direkt vom Browser zur Tankerkönig-Schnittstelle. Unser Server ist daran nicht beteiligt – er liefert nur die App-Dateien aus. Das hat zwei angenehme Nebeneffekte: Wir sehen nicht, wo Sie tanken. Und wenn unser Server ausfällt, läuft die App trotzdem, solange sie einmal geladen war.
Der API-Schlüssel – warum man einen braucht
Tankerkönig verteilt die Daten kostenfrei, aber nicht völlig frei. Jeder Nutzer braucht einen persönlichen Schlüssel. Den bekommt man auf creativecommons.tankerkoenig.de/api-key/ per E-Mail-Bestätigung in unter einer Minute.
Das ist eine kleine Hürde, aber sinnvoll: Sie schützt das offene Angebot vor Massen-Abfragen und sorgt dafür, dass Tankerkönig die API langfristig kostenfrei anbieten kann. Der Schlüssel wird einmalig in den Einstellungen der App eingetragen, bleibt auf Ihrem Gerät gespeichert und wird nicht an uns übertragen.
Wir hätten den Schlüssel auch fest in die App einbauen können. Das hätte die Einrichtung verkürzt, aber zwei Probleme produziert: Erstens wäre der Schlüssel im JavaScript-Code für jeden lesbar – und damit für Missbrauch durch beliebige Dritte offen. Zweitens würden alle Anfragen über einen Schlüssel laufen, was die Tankerkönig-Limits sprengt, sobald die App ein paar Hundert Nutzer hat.
Wo PWA an Grenzen stößt – und wo nicht
PWAs sind keine Wunderwaffe. Es gibt Anwendungen, für die eine native App tatsächlich besser passt: Wenn intensiver Zugriff auf Bluetooth, NFC oder Hardware-Sensoren nötig ist, wenn die App vollständig offline arbeiten muss inklusive großer lokaler Datenbanken, oder wenn sie in den Hintergrund-Diensten des Geräts mitlaufen soll wie ein Schrittzähler oder eine Fahrradtour-Aufzeichnung.
Für die meisten anderen Fälle – Dashboards, Listen, Formulare, Werkzeuge wie Sprit-Radar – ist eine PWA jedoch der schnellere, schlankere und meistens auch wartungsärmere Weg. Wir haben in den letzten Monaten mehrere kleinere PWAs für Eigenbedarf gebaut: einen internen Schichtplan, einen Werkzeug-Tracker, einen Verbrauchsmonitor. Alle in deutlich unter einem Tag, alle ohne App-Store-Hürde, alle laufen auf jedem Gerät.
Mehr dazu, wann eine PWA und wann eine native App passt, steht in unserem ausführlicheren Vergleich „PWA oder native Store-App – warum die kürzere Antwort meist falsch ist".
Was wir damit zeigen wollen
Sprit-Radar ist kein Geschäftsmodell. Wir verkaufen sie nicht, wir vermieten sie nicht, wir verschenken keine Pro-Version. Sie ist ein laufendes Beispiel dafür, wie ein kleines digitales Werkzeug aussehen kann, wenn man konsequent weglässt, was nicht zwingend nötig ist.
Vieles, was als „digitalisiert" verkauft wird, sind aufgeblähte Konstrukte: zentrale Plattformen mit monatlichem Abonnement, einer 30-Punkte-Konfiguration, einer KI, die nicht gebraucht wird, und einem Dashboard, das niemand öffnet. Eine 30-Kilobyte-Datei mit klarer Funktion ist häufig besser als ein 8-Megabyte-Framework mit demselben Ergebnis.
Wenn Sie eine kleine Aufgabe in Ihrem Unternehmen oder Verein haben, die mit so einer schlanken App lösbar wäre – Schichtplan, Telefonliste, Lagerstatus, Wartungs-Checkliste, interner Verbrauchstracker – dann sprechen Sie uns an. Wir bauen sie. Lieber einen Tag investiert in 30 Kilobyte, die ein Team wirklich täglich nutzt, als drei Wochen in eine Plattform, die niemand öffnet.
Eine eigene PWA für Ihr Team oder Ihr Unternehmen?
Schichtplan, Telefonliste, Wartungs-Checkliste, Verbrauchstracker, Lagerstatus — viele kleine Werkzeuge passen besser in eine PWA als in eine Store-App. Wir konzipieren und bauen, mit Ihrem Logo und Ihren Inhalten.
PWA anfragenSprit-Radar selbst ausprobieren
Die App ist erreichbar unter netzhandwerker.de/sprit/. Beim ersten Aufruf einmal den Tankerkönig-Schlüssel in den Einstellungen eintragen, dann ist sie nutzbar. Auf iPhone und Android lässt sie sich über das Teilen-Menü („Zum Home-Bildschirm") als App ablegen, auf Desktop-Browsern erscheint ein Install-Symbol in der Adressleiste.
Wir freuen uns über Rückmeldungen, Wünsche und Fehlermeldungen — per Mail an [email protected].