Adaptar una aplicación móvil a una extensión de navegador

KeyRush comenzó en iPhone y Android. Cuando decidimos trasladarlo a Chrome, teníamos dos opciones: envolver la aplicación existente en alguna capa multiplataforma o reescribirla para el navegador. La reescribimos, portándola desde la versión Android. JavaScript puro, Manifest V3, sin framework y sin pasos de compilación. Esto es lo que aprendimos al hacerlo.

El teclado ya es una realidad

En un teléfono, una aplicación para aprender a teclear es una solución aproximada. El teclado en pantalla es a la vez el dispositivo de entrada y el objeto de aprendizaje, lo cual resulta una situación un poco extraña. En el navegador, el usuario tiene un teclado real bajo los dedos, precisamente lo que la aplicación intenta enseñarle.

Eso cambió más de lo que esperábamos. Las distribuciones varían según el país y el tipo de teclado. Existen teclas modificadoras. La gente mantiene pulsadas las teclas, pulsa dos a la vez o cambia de distribución en mitad de una sesión. En un teclado físico, cualquier pequeña imprecisión en el simulador se nota de inmediato, por lo que tuvimos que ser mucho más cuidadosos a la hora de determinar qué se considera una pulsación correcta.

Hemos mantenido el teclado en pantalla, pero su función ha cambiado. En un teléfono, es lo que pulsas. En la extensión, es una guía: resalta la tecla que debes pulsar a continuación, para que puedas mantener la vista en la pantalla en lugar de en tus manos. Esa es la esencia misma de la mecanografía a ciegas, y el navegador nos ha permitido tomárnosla en serio.

Los tamaños de las ventanas no son fijos

Las pantallas de los teléfonos tienen unas cuantas formas diferentes. Las ventanas del navegador pueden tener cualquier forma. La ventana emergente de una extensión es estrecha y corta; una pestaña completa puede ser enorme. La misma aplicación tenía que funcionar bien en ambos casos.

Por eso ofrecemos ambas opciones. KeyRush se abre en una ventana emergente para hacer una prueba rápida y en una pestaña completa cuando necesitas espacio para las lecciones y las competiciones. Con Alt+Mayús+K se abre sin tener que usar el ratón, lo cual, para una aplicación de mecanografía, nos pareció la configuración predeterminada más adecuada.

Las ventanas emergentes lo olvidan todo

Una ventana emergente se cierra en cuanto haces clic fuera de ella, y todo lo que tenía almacenado en memoria se pierde con ella. En Android, una aplicación puede pasar a segundo plano y reanudarse exactamente donde se quedó. En una ventana emergente, hay que dar por hecho que el usuario puede desaparecer en cualquier momento.

Así pues, todo lo importante se almacena en la memoria del navegador, en lugar de en la ventana, y tanto la ventana emergente como la pestaña completa leen el mismo estado almacenado. Cuando terminas una prueba en la ventana emergente, abres la pestaña completa y el resultado ya está ahí. Es una pequeña decisión arquitectónica que ha hecho que toda la extensión resulte más sólida.

Los permisos son una decisión de diseño

Las aplicaciones Android también solicitan permisos, pero los usuarios rara vez los leen. Los usuarios de extensiones suelen hacerlo, y el navegador muestra las advertencias directamente en la ventana de instalación. KeyRush solo solicita uno: almacenamiento. No necesita ver las páginas que visitas, así que no te lo pide. Hemos escrito una entrada aparte sobre por qué eso es importante para nosotros.

Lo que conservamos

Casi todo el contenido del producto se ha mantenido sin cambios: pruebas cronometradas de velocidad de 15, 30, 60 y 120 segundos, lecciones de mecanografía organizadas por dedo, competiciones contra oponentes del ordenador, estadísticas, un mapa de calor de las teclas que fallas, el reto diario y los 44 logros. Cualquiera que pase del móvil a la extensión debería sentirse como en casa en menos de un minuto.

También hemos mantenido los principios. Funciona totalmente sin conexión. El progreso se guarda únicamente en tu navegador. No hay ninguna cuenta ni es necesario iniciar sesión.

Por qué no compartimos el código

Reescribir el código parecía caro y, en cierto modo, lo fue. Pero un entrenador de mecanografía no es una aplicación muy grande, y la lógica que importa —puntuación, lecciones, niveles, logros— es lo suficientemente sencilla como para adaptarla cuidadosamente a mano a partir del original de Android. A cambio, hemos conseguido una extensión que se carga al instante, no tiene dependencias de terceros que mantener actualizadas y funciona como si estuviera hecha para el navegador, porque así es.