Portage d'une application mobile vers une extension de navigateur

KeyRush a vu le jour sur iPhone et Android. Lorsque nous avons décidé de le faire passer à Chrome, nous avions le choix : encapsuler l’application existante dans une couche multiplateforme, ou la réécrire pour le navigateur. Nous l’avons réécrite, en la portant depuis la version Android. Du JavaScript pur, Manifest V3, sans framework et sans étape de compilation. Voici ce que nous avons appris en procédant ainsi.

Le clavier est désormais une réalité

Sur un téléphone, un logiciel d'apprentissage de la frappe n'est qu'une approximation. Le clavier à l'écran sert à la fois de périphérique de saisie et d'objet d'apprentissage, ce qui constitue une situation quelque peu étrange. Dans le navigateur, l'utilisateur a un véritable clavier sous les doigts — précisément ce que l'application tente de lui enseigner.

Cela a changé bien plus que nous ne l'avions prévu. Les dispositions varient d'un pays à l'autre et d'un clavier à l'autre. Il existe des touches de modification. Les utilisateurs maintiennent des touches enfoncées, en appuient sur deux à la fois ou changent de disposition en cours de session. Sur un clavier physique, la moindre imprécision dans le simulateur se ressent immédiatement ; nous avons donc dû faire preuve d'une bien plus grande rigueur pour déterminer ce qui constituait une frappe correcte.

Nous avons conservé le clavier virtuel, mais son rôle a changé. Sur un téléphone, c’est ce sur quoi on appuie. Dans l’extension, c’est un guide : il met en surbrillance la touche sur laquelle vous devez appuyer ensuite, ce qui vous permet de garder les yeux rivés sur l’écran plutôt que sur vos mains. C’est là tout l’intérêt de la frappe à l’aveugle, et le navigateur nous a permis de prendre cela au sérieux.

Les dimensions des fenêtres ne sont pas fixes

Les écrans de téléphone se déclinent en quelques formes différentes. Les fenêtres de navigateur, quant à elles, peuvent prendre n'importe quelle forme. La fenêtre contextuelle d'une extension est étroite et courte ; un onglet complet peut être immense. La même application devait s'adapter à ces deux formats.

Nous proposons donc les deux options. KeyRush s'ouvre sous forme de fenêtre contextuelle pour un test rapide, et dans un onglet complet lorsque vous souhaitez disposer de plus d'espace pour les leçons et les défis. La combinaison Alt+Maj+K permet de l'ouvrir sans avoir à utiliser la souris — ce qui, pour une application de dactylographie, nous a semblé être le bon réglage par défaut.

Les fenêtres contextuelles oublient tout

Une fenêtre contextuelle se ferme dès que vous cliquez en dehors de celle-ci, et tout ce qu'elle contenait en mémoire disparaît avec elle. Sur Android, une application peut être mise en arrière-plan et reprendre exactement là où elle s'était arrêtée. Dans une fenêtre contextuelle, vous devez partir du principe que l'utilisateur peut quitter l'application à tout moment.

Ainsi, tout ce qui compte est stocké dans la mémoire du navigateur plutôt que dans la fenêtre, et la fenêtre contextuelle ainsi que l'onglet complet lisent les mêmes données enregistrées. Une fois un test terminé dans la fenêtre contextuelle, il suffit d'ouvrir l'onglet complet pour que le résultat s'y trouve déjà. C'est un petit choix architectural qui a permis de rendre l'extension dans son ensemble plus solide.

Les autorisations relèvent d'un choix de conception

Les applications Android demandent également des autorisations, mais les utilisateurs les lisent rarement. Ce n’est généralement pas le cas des utilisateurs d’extensions, et le navigateur affiche les avertissements directement dans la fenêtre d’installation. KeyRush n’en demande qu’une seule : l’accès au stockage. L’extension n’a pas besoin d’accéder aux pages que vous consultez, elle ne vous le demande donc pas. Nous avons rédigé un article à part entière expliquant pourquoi cela est important pour nous.

Ce que nous avons conservé

La quasi-totalité du produit est restée inchangée : des tests de vitesse chronométrés de 15, 30, 60 et 120 secondes, des leçons de dactylographie organisées par doigt, des courses contre des adversaires virtuels, des statistiques, une carte thermique des touches que vous manquez, le défi quotidien et l'ensemble des 44 succès. Une personne passant de la version mobile à la version de bureau devrait se sentir à l'aise en moins d'une minute.

Nous avons également conservé ces principes. L'application fonctionne entièrement hors ligne. La progression est enregistrée uniquement dans votre navigateur. Il n'y a pas de compte et aucune connexion n'est requise.

Pourquoi nous n'avons pas partagé notre code

Une réécriture peut sembler coûteuse, et ça l’a été à certains égards. Mais un logiciel d’apprentissage de la frappe n’est pas une application volumineuse, et la logique essentielle — le système de points, les leçons, les niveaux, les succès — est suffisamment simple pour être portée manuellement, avec soin, depuis la version originale Android. En contrepartie, nous avons obtenu une extension qui se charge instantanément, ne dépend d’aucun composant tiers nécessitant des mises à jour, et qui se comporte comme si elle avait été conçue pour le navigateur, car c’est effectivement le cas.