Trasferimento di un'app per telefono in un'estensione per browser

KeyRush è nato su iPhone e Android. Quando abbiamo deciso di portarlo su Chrome, ci siamo trovati di fronte a una scelta: avvolgere l’app esistente in un livello multipiattaforma oppure riscriverla per il browser. Abbiamo optato per la riscrittura, effettuando il porting dalla versione Android. Solo JavaScript, Manifest V3, nessun framework e nessuna fase di compilazione. Ecco cosa abbiamo imparato da questa esperienza.

La tastiera è ormai una realtà

Su uno smartphone, un programma per imparare a digitare è una soluzione approssimativa. La tastiera su schermo è allo stesso tempo il dispositivo di input e l’oggetto dell’apprendimento, il che crea una situazione un po’ strana. Nel browser, invece, l’utente ha sotto le dita una tastiera vera e propria — proprio ciò che l’app sta cercando di insegnare.

La situazione si è rivelata molto diversa da quanto ci aspettassimo. Le disposizioni dei tasti variano da un paese all’altro e da una tastiera all’altra. Esistono i tasti modificatori. Gli utenti tengono premuti i tasti, ne premono due contemporaneamente, cambiano disposizione durante la sessione. Su una tastiera fisica ogni minima imprecisione nel simulatore si avverte immediatamente, quindi abbiamo dovuto prestare molta più attenzione a ciò che viene considerato un tasto premuto correttamente.

Abbiamo mantenuto la tastiera su schermo, ma la sua funzione è cambiata. Su uno smartphone è ciò che si preme. Nell’estensione funge da guida: evidenzia il tasto che si deve premere successivamente, così puoi tenere gli occhi sullo schermo invece che sulle mani. È proprio questo il senso della digitazione cieca, e il browser ci ha permesso di prenderla sul serio.

Le dimensioni delle finestre non sono fisse

Gli schermi dei telefoni sono disponibili in poche forme diverse. Le finestre del browser, invece, possono assumere qualsiasi forma. Il popup di un'estensione è stretto e corto; una scheda a schermo intero può essere enorme. La stessa app doveva risultare intuitiva in entrambi i casi.

Quindi offriamo entrambe le opzioni. KeyRush si apre come finestra pop-up per un test veloce e in una scheda a schermo intero quando serve più spazio per le lezioni e le gare. La combinazione Alt+Shift+K permette di aprirlo senza dover usare il mouse — il che, per un’app di digitazione, ci è sembrata l’impostazione predefinita più appropriata.

I popup dimenticano tutto

Un popup si chiude non appena si fa clic al di fuori di esso, e tutto ciò che occupava in memoria viene eliminato. Su Android, un'app può essere messa in secondo piano e riprendere esattamente da dove era stata interrotta. In un popup, bisogna partire dal presupposto che l'utente possa chiudere la finestra in qualsiasi momento.

Quindi tutto ciò che conta risiede nella memoria del browser piuttosto che nella finestra, e sia la finestra pop-up che la scheda a schermo intero leggono dallo stesso stato memorizzato. Una volta completato un test nella finestra pop-up, basta aprire la scheda a schermo intero e il risultato è già lì. È una piccola scelta architettonica che ha reso l'intera estensione più solida.

Le autorizzazioni sono una scelta progettuale

Anche le app Android richiedono autorizzazioni, ma gli utenti le leggono raramente. Gli utenti delle estensioni, invece, lo fanno spesso, e il browser mostra gli avvisi direttamente nella finestra di installazione. KeyRush ne richiede esattamente una: l’accesso alla memoria. Non ha bisogno di vedere le pagine che visiti, quindi non te lo chiede. Abbiamo scritto un post a parte sul motivo per cui questo è importante per noi.

Quello che abbiamo conservato

Quasi tutto il contenuto del prodotto è rimasto invariato: prove di velocità cronometrate da 15, 30, 60 e 120 secondi, lezioni di dattilografia organizzate per dito, gare contro avversari virtuali, statistiche, una mappa termica dei tasti sbagliati, la sfida quotidiana e tutti i 44 obiettivi. Chi passa dall’app per smartphone alla versione desktop dovrebbe sentirsi a proprio agio nel giro di un minuto.

Abbiamo mantenuto anche i principi fondamentali. Funziona completamente offline. I progressi vengono salvati esclusivamente nel browser. Non c'è alcun account e non è necessario effettuare alcun accesso.

Perché non abbiamo condiviso il codice

Riscrivere il codice sembrava costoso, e in un certo senso lo è stato. Ma un programma per imparare a digitare non è un’app di grandi dimensioni, e la logica fondamentale — punteggio, lezioni, livelli, obiettivi raggiunti — è abbastanza snella da poter essere trasferita con cura a mano dall’originale Android. In cambio abbiamo ottenuto un'estensione che si carica all'istante, non presenta dipendenze da terze parti da mantenere aggiornate e si comporta come se fosse stata creata appositamente per il browser, perché è proprio così.