Portierung einer Smartphone-App in eine Browser-Erweiterung

KeyRush startete auf iPhone und Android. Als wir beschlossen, es auf Chrome zu portieren, standen wir vor der Wahl: Entweder die bestehende App in eine plattformübergreifende Schicht zu verpacken oder sie für den Browser neu zu schreiben. Wir haben sie neu geschrieben und dabei von der Android-Version portiert. Reines JavaScript, Manifest V3, kein Framework und kein Build-Schritt. Hier sind die Erkenntnisse, die wir dabei gewonnen haben.

Die Tastatur ist jetzt echt

Auf einem Smartphone ist ein Tipptrainer nur eine Annäherung. Die Bildschirmtastatur ist gleichzeitig Eingabegerät und Lernobjekt, was eine etwas seltsame Situation darstellt. Im Browser hat der Nutzer eine echte Tastatur unter den Fingern – genau das, was die App ihm beibringen will.

Das hat sich stärker verändert, als wir erwartet hatten. Die Tastaturlayouts unterscheiden sich je nach Land und Gerät. Es gibt Modifikatortasten. Die Nutzer halten Tasten gedrückt, drücken zwei Tasten gleichzeitig oder wechseln mitten in einer Sitzung das Layout. Auf einer physischen Tastatur macht sich jede noch so kleine Ungenauigkeit im Trainer sofort bemerkbar, sodass wir viel sorgfältiger darauf achten mussten, was als korrekter Tastenanschlag gilt.

Wir haben die Bildschirmtastatur beibehalten, aber ihre Funktion hat sich geändert. Auf einem Smartphone drückt man darauf. In der Erweiterung dient sie als Orientierungshilfe: Sie hebt die Taste hervor, die man als Nächstes drücken sollte, sodass man den Blick auf den Bildschirm richten kann, anstatt auf die Hände. Das ist der Sinn des Blindschreibens, und der Browser hat es uns ermöglicht, dies ernst zu nehmen.

Die Fenstergrößen sind nicht fest vorgegeben.

Smartphone-Bildschirme gibt es in einer Handvoll Formen. Browserfenster hingegen können jede erdenkliche Form haben. Ein Popup-Fenster einer Erweiterung ist schmal und kurz; ein vollständiger Tab kann hingegen riesig sein. Dieselbe App musste in beiden Fällen sinnvoll funktionieren.

Deshalb bieten wir beides an. KeyRush öffnet sich als Popup-Fenster für einen schnellen Test und als vollwertiger Tab, wenn du Platz für Lektionen und Wettläufe brauchst. Mit Alt+Umschalt+K lässt es sich öffnen, ohne zur Maus greifen zu müssen – was mir für eine Tipp-App als die richtige Standardeinstellung erschien.

Popups vergessen alles

Ein Popup-Fenster wird geschlossen, sobald man außerhalb davon klickt, und alles, was es im Speicher belegt hat, verschwindet ebenfalls. Bei Android kann eine App in den Hintergrund verschoben werden und genau dort wieder aufgerufen werden, wo sie aufgehört hat. Bei einem Popup-Fenster muss man davon ausgehen, dass der Nutzer jeden Moment verschwinden könnte.

Alles, was wichtig ist, wird also im Browserspeicher statt im Fenster abgelegt, und sowohl das Popup als auch der vollständige Tab lesen denselben gespeicherten Zustand aus. Beendet man einen Test im Popup und öffnet anschließend den vollständigen Tab, ist das Ergebnis bereits vorhanden. Es ist eine kleine architektonische Entscheidung, die dazu geführt hat, dass sich die gesamte Erweiterung solider anfühlt.

Berechtigungen sind eine Designentscheidung

Auch Android-Apps fordern Berechtigungen an, doch die Nutzer lesen diese selten. Nutzer von Browser-Erweiterungen tun dies hingegen oft, und der Browser zeigt die Warnungen direkt in der Installationsaufforderung an. KeyRush fordert genau eine Berechtigung an: Speicherzugriff. Da die App keinen Einblick in die von Ihnen besuchten Seiten benötigt, fragt sie nicht danach. Wir haben einen separaten Beitrag darüber verfasst, warum uns das wichtig ist.

Was wir behalten haben

Fast das gesamte eigentliche Produkt blieb unverändert: zeitgesteuerte Geschwindigkeitstests von 15, 30, 60 und 120 Sekunden, nach Fingern gegliederte Blindschreibübungen, Wettläufe gegen Computergegner, Statistiken, eine Heatmap der Tasten, die man verfehlt, die tägliche Herausforderung und alle 44 Erfolge. Wer vom Smartphone auf die Erweiterung umsteigt, sollte sich innerhalb einer Minute zurechtfinden.

Auch an diesen Grundsätzen haben wir festgehalten. Die Anwendung funktioniert vollständig offline. Der Fortschritt wird ausschließlich in Ihrem Browser gespeichert. Es gibt kein Konto und Sie müssen sich nirgendwo anmelden.

Warum wir keinen Code geteilt haben

Eine Neuprogrammierung klingt aufwendig, und in gewisser Weise war sie das auch. Aber ein Tipptrainer ist keine große App, und die wesentlichen Funktionen – Punktestand, Lektionen, Levels, Erfolge – sind überschaubar genug, um sie sorgfältig von Hand aus dem Android-Original zu portieren. Im Gegenzug erhielten wir eine Erweiterung, die sofort geladen wird, keine Abhängigkeiten von Drittanbietern hat, die aktualisiert werden müssen, und sich so verhält, als wäre sie für den Browser gemacht – denn das ist sie auch.