Le app web progressive (PWA) sono sviluppate e migliorate con API moderne per offrire funzionalità, affidabilità e installabilità avanzate, raggiungendo al contempo chiunque, ovunque e su qualsiasi dispositivo con un unico codebase. Per creare la migliore esperienza possibile, segui gli elenchi di controllo e i consigli principali e ottimali come guida.
Elenco di controllo principale per le app web progressive
L'elenco di controllo per le app web progressive descrive cosa rende un'app installabile e utilizzabile da tutti gli utenti, indipendentemente dalle dimensioni o dal tipo di input.
Le prestazioni giocano un ruolo importante nel successo di qualsiasi esperienza online, perché i siti ad alte prestazioni coinvolgono e trattengono gli utenti meglio di quelli con prestazioni scadenti. Concentrati sull'ottimizzazione per metriche delle prestazioni incentrate sugli utenti.
Perché
La velocità è fondamentale per convincere gli utenti a utilizzare la tua app.
Infatti, se i tempi di caricamento di una pagina aumentano da un secondo a dieci secondi, la
probabilità che un utente rimbalzi aumenta del 123%. Il rendimento non si
limita all'evento load. Gli utenti non dovrebbero mai chiedersi se la loro interazione, ad esempio i clic su un pulsante, sia stata registrata o meno. Lo scorrimento e l'animazione devono risultare fluidi.
Le prestazioni influiscono sull'intera esperienza, sia sul comportamento
dell'app sia sulla percezione degli utenti.
Sebbene tutte le applicazioni abbiano esigenze diverse, i controlli delle prestazioni in Lighthouse si basano sui Core Web Vitals e ottenere punteggi elevati in questi controlli aumentano le probabilità che gli utenti abbiano un'esperienza piacevole. Puoi anche utilizzare PageSpeed Insights o il Report sull'esperienza utente di Chrome per ottenere dati reali sulle prestazioni della tua app web.
Come
Segui la nostra guida ai tempi di caricamento rapidi per scoprire come avviare e mantenere la tua PWA velocemente.
Gli utenti possono utilizzare qualsiasi browser per accedere alla tua app web prima che venga installata.
Perché
Le app web progressive sono applicazioni web, il che significa che devono funzionare su più browser.
Un modo efficace per farlo è, secondo Jeremy Keith in Resilient Web Design, identificare le funzionalità principali, renderle disponibili utilizzando la tecnologia più semplice possibile e quindi migliorare l'esperienza ove possibile. In molti casi, ciò significa iniziare con il codice HTML per creare le funzionalità principali e migliorare l'esperienza utente con CSS e JavaScript per creare un'esperienza più coinvolgente.
Prendiamo come esempio l'invio di un modulo. Il modo più semplice per implementarlo è un modulo HTML che invia una richiesta POST. Dopo averlo creato, puoi migliorare l'esperienza con JavaScript per eseguire la convalida del modulo e inviarlo tramite AJAX, migliorando l'esperienza per gli utenti che possono supportarlo.
Gli utenti visitano il tuo sito su una vasta gamma di dispositivi e browser. Non puoi scegliere come target solo il limite superiore di quello spettro. Utilizza il rilevamento delle funzionalità per offrire un'esperienza utilizzabile per la più ampia gamma possibile di utenti potenziali, compresi quelli che utilizzano browser e dispositivi che non esistono ancora.
Come
Resilient Web Design di Jeremy Keith è una risorsa eccellente che descrive come pensare al web design in questa metodologia progressiva e cross-browser.
Letture aggiuntive
- Understanding Progression Enhancement di List Apart è un'ottima introduzione all'argomento.
- Smashing Magazine Progressivo miglioramento: cos'è e come utilizzarlo? fornisce un'introduzione pratica e fornisce link ad argomenti più avanzati.
- L'articolo Implementazione del rilevamento delle funzionalità di MDN illustra come rilevare una caratteristica eseguendone direttamente una query.
Gli utenti possono utilizzare la PWA su qualsiasi dimensione dello schermo e tutti i suoi contenuti sono disponibili in qualsiasi dimensione dell'area visibile.
Perché
I dispositivi sono disponibili in diverse dimensioni e gli utenti possono utilizzare l'applicazione in diverse dimensioni, anche sullo stesso dispositivo. Di conseguenza, è fondamentale garantire non solo che i contenuti rientrino nell'area visibile, ma che tutte le funzionalità e i contenuti del sito siano utilizzabili in tutte le dimensioni dell'area visibile.
Le attività che gli utenti vogliono completare e i contenuti a cui vogliono accedere non cambiano con le dimensioni dell'area visibile. Puoi riorganizzare i tuoi contenuti per diverse dimensioni dell'area visibile, in modo che dovrebbero trovarsi tutti lì, in un modo o nell'altro. Infatti, come afferma Luke Wroblewski nel suo libro Mobile First, iniziare in piccolo e modificare il design per schermi più grandi può migliorare il design di un sito:
I dispositivi mobili richiedono che i team di sviluppo software si concentrino solo sui dati e sulle azioni più importanti in un'applicazione. Uno schermo da 320 x 480 pixel non ha spazio per elementi estranei e non necessari. Devi dare la priorità.
Come
Sono disponibili molte risorse sul responsive design, tra cui l'articolo originale di Ethan Marcotte, una raccolta di concetti importanti correlati, nonché libri e dibattiti. Per restringere la discussione agli aspetti relativi ai contenuti del responsive design, consulta gli articoli sul design incentrato sui contenuti e sui layout adattabili per l'uscita dei contenuti. Infine, anche se l'argomento è incentrato sui dispositivi mobili, le lezioni del libro Seven Deadly Mobile Myths di Josh Clark sono pertinenti sia per le visualizzazioni di siti adattabili di piccole dimensioni che per quelle in generale per i dispositivi mobili.
Quando gli utenti sono offline, tenerli nella PWA offre un'esperienza più fluida rispetto al dover tornare alla pagina offline del browser predefinita.
Perché
Gli utenti si aspettano che le app installate funzionino a prescindere dallo stato della connessione. Un'app specifica della piattaforma non mostra mai una pagina vuota quando è offline e una PWA non dovrebbe mai mostrare la pagina offline predefinita del browser. Fornire un'esperienza offline personalizzata, sia quando un utente accede a un URL che non è stato memorizzato nella cache sia quando un utente prova a utilizzare una funzionalità che richiede una connessione, rende la tua esperienza web percepita come parte del dispositivo su cui viene eseguito.
Come
Durante l'evento install di un service worker, puoi prememorizzare nella cache una pagina offline personalizzata per utilizzarla in un secondo momento. Se un utente passa alla modalità offline, puoi rispondere con la pagina offline personalizzata pre-memorizzata nella cache. Puoi seguire il nostro esempio di pagina offline personalizzato per vedere un esempio pratico e scoprire come implementarlo autonomamente.
Gli utenti che installano o aggiungono app sul proprio dispositivo tendono a interagire maggiormente con queste app.
Perché
L'installazione di un'app web progressiva consente di avere aspetto, design e comportamento come tutte le altre app installate. Viene avviato dallo stesso punto in cui gli utenti avviano le altre app. Viene eseguito nella propria finestra dell'app, separata dal browser, e viene visualizzato nell'elenco delle attività, proprio come le altre app.
Come per le app specifiche per dispositivo, gli utenti che installano le tue app sono il tuo pubblico più coinvolto e spesso dispongono di metriche sul coinvolgimento pari a quelle degli utenti di app sui dispositivi mobili. Queste metriche includono un numero maggiore di visite ripetute, tempi più lunghi sul sito e tassi di conversione più elevati rispetto ai visitatori tipici.
Come
Segui la nostra guida installabile per scoprire come rendere installabile la tua PWA.
Elenco di controllo per le app web progressive ottimali
Per creare una PWA davvero fantastica, che sembri un'app tra le migliori del settore, hai bisogno di qualcosa in più oltre all'elenco di controllo di base. L'elenco di controllo per le PWA ottimale consiste nel far sì che la PWA faccia parte del dispositivo su cui viene eseguita, sfruttando al tempo stesso le caratteristiche che rendono potente il web.
Quando la connettività non è strettamente richiesta, l'app funziona offline e online.
Perché
Oltre a fornire una pagina offline personalizzata, gli utenti si aspettano che le PWA siano utilizzabili offline. Ad esempio, le app per i viaggi e le compagnie aeree devono avere i dettagli delle corse e le carte d'imbarco prontamente disponibili offline. Le app di musica, video e podcasting devono consentire la riproduzione offline. Le app social e di notizie devono memorizzare nella cache i contenuti recenti in modo che gli utenti possano leggerli offline. Gli utenti si aspettano di rimanere autenticati anche quando sono offline, quindi progetta un'autenticazione offline. Una PWA offline offre agli utenti un'esperienza reale simile a quella di un'app.
Come
Dopo aver stabilito quali funzionalità gli utenti si aspettano di utilizzare offline, devi rendere i tuoi contenuti disponibili e adattabili ai contesti offline. Puoi utilizzare IndexedDB, un sistema di archiviazione NoSQL integrato nel browser, per archiviare e recuperare i dati, nonché per la sincronizzazione in background, per consentire agli utenti di eseguire azioni in modalità offline e rinviare le comunicazioni con il server finché l'utente non raggiunge nuovamente una connessione stabile. Puoi utilizzare i service worker anche per archiviare altri tipi di contenuti, ad esempio immagini, file video e file audio, da utilizzare offline e per implementare sessioni sicure e di lunga durata per mantenere autenticati gli utenti. Dal punto di vista dell'esperienza utente, puoi utilizzare scheletri di schermo che offrono agli utenti una percezione della velocità e dei contenuti durante il caricamento, che possono quindi recuperare i contenuti memorizzati nella cache o un indicatore offline, se necessario.
Tutte le interazioni degli utenti soddisfano i requisiti di accessibilità delle WCAG 2.0.
Perché
La maggior parte degli utenti, a un certo punto della propria vita, vuole utilizzare la PWA secondo quanto previsto dai requisiti di accessibilità WCAG 2.0. La capacità degli esseri umani di interagire con la tua PWA e comprenderla esiste in uno spettro di applicazioni e le esigenze possono essere temporanee o permanenti. Rendendo la tua PWA accessibile, la rendi utilizzabile per tutti.
Come
Il documento
Introduzione all'accessibilità web di W3C è un buon punto di partenza. La maggior parte dei test di accessibilità deve essere eseguita manualmente. Strumenti come i controlli di accessibilità
in Lighthouse, axe
e Accessibility Insights
possono aiutarti ad automatizzare alcuni test di accessibilità. Inoltre, è importante utilizzare elementi semanticamente corretti anziché ricrearli da soli, ad esempio gli elementi a e button. Ciò garantisce che, quando devi creare funzionalità più avanzate, vengano soddisfatte le aspettative di accessibilità (ad esempio quando usare le frecce rispetto alle schede).
A11Y Nutrition Cards offre ottimi consigli in merito per alcuni componenti comuni.
La tua PWA può essere facilmente scoperta attraverso la ricerca.
Perché
Uno dei maggiori vantaggi del web è la possibilità di trovare siti e app mediante la ricerca. Infatti, più della metà di tutto il traffico sul sito web proviene dalla ricerca organica. Per consentire ai potenziali utenti di trovare la tua PWA, è fondamentale che esistano URL canonici per i contenuti e che i motori di ricerca possano indicizzare il tuo sito. Ciò è particolarmente vero quando si adotta il rendering lato client.
Come
Per prima cosa, assicurati che ogni URL abbia un titolo e una meta descrizione univoci e descrittivi. Quindi puoi utilizzare Google Search Console e i controlli dell'ottimizzazione per i motori di ricerca in Lighthouse per eseguire il debug e risolvere i problemi di rilevabilità della PWA. Puoi anche utilizzare gli strumenti per i proprietari dei siti di Bing o Yandex e valutare l'inclusione dei dati strutturati utilizzando gli schemi di Schema.org nella tua PWA.
La tua PWA è utilizzabile allo stesso modo con un mouse, una tastiera, uno stilo o un tocco.
Perché
I dispositivi offrono diversi metodi di inserimento e gli utenti devono essere in grado di passare facilmente da uno all'altro mentre utilizzano la tua applicazione. Inoltre, i metodi di immissione non devono dipendere dalle dimensioni dello schermo, il che significa che aree visibili di grandi dimensioni devono supportare funzionalità touch e aree visibili piccole devono supportare tastiere e mouse. Per quanto possibile, assicurati che l'applicazione e tutte le relative funzionalità supportino l'utilizzo di qualsiasi metodo di immissione scelto dall'utente. Se opportuno, migliora le esperienze per consentire anche controlli specifici dell'input (come il pull-to-refresh).
Come
L'API Pointer Events offre un'interfaccia unificata per lavorare con varie opzioni di input ed è particolarmente utile per l'aggiunta del supporto per stilo. Per supportare sia il tocco che la tastiera, assicurati di utilizzare gli elementi semantici corretti (anchor, pulsanti, controlli del modulo e così via) e di non ricrearli con HTML non semantico. Quando includi le interazioni che si attivano al passaggio del mouse, assicurati che possano attivarsi anche con un clic o un tocco.
Quando chiedi l'autorizzazione per utilizzare API potenti, fornisci il contesto e chiedi solo quando è necessaria l'API.
Perché
Le API che attivano un prompt di autorizzazione, come notifiche, geolocalizzazione e credenziali, sono progettate intenzionalmente in modo da interferire con l'utente perché tendono a essere correlate a funzionalità efficaci che richiedono l'attivazione. L'attivazione di questi prompt senza contesto aggiuntivo, ad esempio al caricamento pagina, riduce le probabilità che gli utenti accettino queste autorizzazioni e sono più propensi a diffidarle in futuro. Attiva invece queste richieste solo dopo aver fornito all'utente una motivazione contestuale sul motivo per cui hai bisogno di questa autorizzazione.
Come
L'articolo Permission UX e l'articolo The Right Ways to Ask Users for Authorization di UX Planet sono ottime risorse per capire come progettare prompt di autorizzazione che, sebbene incentrati sui dispositivi mobili, si applichino a tutte le PWA.
Mantenere integro il tuo codebase semplifica il raggiungimento dei tuoi obiettivi e la fornitura di nuove funzionalità.
Perché
Sono molti gli aspetti che richiedono la creazione di un'applicazione web moderna. Mantenere aggiornata l'applicazione e il codebase integro ti consente di fornire più facilmente nuove funzionalità che soddisfano gli altri obiettivi indicati in questo elenco di controllo.
Come
Esistono una serie di controlli ad alta priorità per garantire un codebase integro:
- Evita di utilizzare librerie con vulnerabilità note.
- Assicurati di non utilizzare API deprecate.
- Rimuovi dal codebase le pratiche di programmazione non sicure (ad esempio, l'utilizzo di
document.write()o la presenza di listener di eventi di scorrimento non passivi), - Puoi anche scrivere il codice in modo difensivo per assicurarti che la PWA non si rompa se l'analisi o altre librerie di terze parti non vengono caricate.
- Potresti richiedere l'analisi statica del codice, come l'analisi tramite lint, nonché test automatici in più browser e canali di rilascio. Queste tecniche possono aiutare a individuare gli errori prima che diventino in produzione.