Le app web progressive (PWA) sono create 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 suggerimenti principali e ottimali.
Elenco di controllo per le app web progressive principali
L'elenco di controllo delle app web progressive descrive cosa rende un'app installabile e utilizzabile da tutti gli utenti, indipendentemente dalle dimensioni o dal tipo di input.
Rapidità di avvio e di esecuzione
Il rendimento svolge un ruolo importante per il successo di qualsiasi esperienza online, in quanto i siti ad alto rendimento coinvolgono e fidelizzano gli utenti meglio di quelli con scarso rendimento. I siti dovrebbero concentrarsi sull'ottimizzazione in base alle metriche di rendimento incentrate sull'utente.
Perché
La velocità è fondamentale per indurre gli utenti a utilizzare la tua app.
Infatti, man mano che i tempi di caricamento delle pagine passano da un secondo a dieci secondi, la probabilità
di rimbalzo da parte di un utente aumenta del 123%. Le prestazioni non si fermano all'evento load. Gli utenti non devono mai chiedersi se la loro interazione, ad esempio
facendo clic su un pulsante, è stata registrata. Lo scorrimento e l'animazione dovrebbero essere fluidi.
Le prestazioni influiscono sulla tua intera esperienza, da come gli utenti percepiscono la tua
applicazione a come funziona effettivamente.
Sebbene tutte le applicazioni abbiano esigenze diverse, i controlli delle prestazioni in Lighthouse si basano sui Segnali web essenziali e i punteggi elevati di questi controlli aumentano le probabilità che i tuoi 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 far avviare velocemente la tua PWA e assicurarti che sia sempre veloce.
Funziona con qualsiasi browser
Gli utenti possono utilizzare qualsiasi browser scelgano per accedere alla tua app web prima che venga installata.
Perché
Le app web progressive sono innanzitutto le app web, il che significa che devono funzionare su tutti i browser, non solo in uno di essi.
Un modo efficace per farlo è, come ha detto Jeremy Keith in Resilient Web Design, identificare la funzionalità di base, renderla disponibile utilizzando la tecnologia più semplice possibile e quindi migliorare l'esperienza, ove possibile. In molti casi, questo significa iniziare con il solo codice HTML per creare la funzionalità di base e migliorare l'esperienza utente con CSS e JavaScript per creare un'esperienza più coinvolgente.
Prendiamo ad esempio l'invio di moduli. 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 utilizzando AJAX, migliorando l'esperienza per gli utenti che possono supportarlo.
Considera l'esperienza degli utenti sul tuo sito su una varietà di dispositivi e browser. Non puoi scegliere come target l'estremità superiore dello spettro. Utilizzando il rilevamento delle funzionalità, sarai in grado di offrire un'esperienza utile per la più vasta gamma di potenziali utenti, compresi quelli che utilizzano browser e dispositivi che al momento potrebbero non esistere.
Come
Resilient Web Design di Jeremy Keith è un'eccellente risorsa che descrive come pensare al web design in questa metodologia progressiva e cross-browser.
Letture aggiuntive
- Un'ottima introduzione all'argomento è Comprensione del miglioramento progressivo di List Apart.
- Progressive Enhancement: What It Is, And How To Use It? di Smashing Magazine presenta un'introduzione pratica e fornisce link ad argomenti più avanzati.
- MDN ha un articolo intitolato Implementazione del rilevamento delle funzionalità che spiega come rilevare una funzionalità tramite query dirette.
Adattabile a schermi di qualsiasi dimensione
Gli utenti possono utilizzare la PWA su qualsiasi dimensione dello schermo e tutti i contenuti sono disponibili in qualsiasi dimensione dell'area visibile.
Perché
I dispositivi sono disponibili in diverse dimensioni e gli utenti possono utilizzare la tua applicazione in una vasta gamma di dimensioni, anche sullo stesso dispositivo. Di conseguenza, è fondamentale assicurarsi che i contenuti non solo 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 in base alle dimensioni dell'area visibile. I contenuti possono essere riorganizzati in base alle dimensioni dell'area visibile e dovrebbero essere tutti lì, in un modo o nell'altro. Infatti, come afferma Luke Wroblewski nel suo libro "Mobile First", iniziare da piccolo e diventare grande invece che viceversa può effettivamente migliorare il design di un sito:
I dispositivi mobili richiedono ai team di sviluppo software di concentrarsi solo sulle azioni e sui dati più importanti in un'applicazione. In uno schermo da 320 x 480 pixel non c'è spazio per elementi estranei e inutili. Bisogna stabilire delle priorità.
Come
Sono disponibili molte risorse sul design reattivo, tra cui l'articolo originale di Ethan Marcotte e una raccolta di concetti importanti correlati, oltre a numerosi libri e dibattiti. Per restringere questa discussione agli aspetti relativi ai contenuti del design reattivo, puoi approfondire l'architettura basata sui contenuti e i layout adattabili per la raccolta di contenuti. Infine, sebbene sia incentrato sui dispositivi mobili, le lezioni di Josh Clark in Seven Deadly Mobile Myths sono pertinenti tanto per le visualizzazioni piccole dei siti adattabili quanto per i dispositivi mobili.
Fornisce una pagina offline personalizzata
Quando gli utenti sono offline, tenerli nella PWA offre un'esperienza più fluida rispetto al tornare alla pagina offline del browser predefinita.
Perché
Gli utenti si aspettano che le app installate funzionino indipendentemente dallo stato della connessione. Un'app specifica della piattaforma non mostra mai una pagina vuota quando è offline e un'app web progressiva non dovrebbe mai mostrare la pagina offline predefinita del browser. Offrire un'esperienza offline personalizzata, sia quando un utente visita un URL che non è stato memorizzato nella cache, sia quando un utente prova a utilizzare una funzionalità che richiede una connessione, rende l'esperienza web come parte del dispositivo su cui viene eseguita.
Come
Durante l'evento install di un service worker, puoi pre-memorizzare 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. Puoi seguire il nostro esempio di pagina offline personalizzato per vedere un esempio pratico e scoprire come implementarlo autonomamente.
Installabile
Gli utenti che installano o aggiungono app al proprio dispositivo tendono a interagire di più con queste app.
Perché
L'installazione di un'app web progressiva consente di avere l'aspetto e il comportamento di tutte le altre app installate. Viene avviata dallo stesso punto in cui gli utenti avviano le altre app. Viene eseguita in una finestra separata dell'app, separata dal browser, e compare nell'elenco delle attività, proprio come le altre app.
Perché vuoi che un utente installi la tua PWA? Lo stesso motivo per cui vorresti che un utente installi la tua app da uno store. Il pubblico più coinvolto è costituito dagli utenti che installano le tue app e hanno metriche sul coinvolgimento migliori rispetto ai visitatori abituali, spesso pari agli utenti delle app sui dispositivi mobili. Queste metriche includono un maggior numero di visite ripetute, tempi più lunghi sul tuo sito e tassi di conversione più elevati.
Come
Puoi seguire la nostra guida all'installazione per scoprire come rendere installabile la tua PWA, come verificare che sia installabile e provare a farlo autonomamente.
Elenco di controllo per l'app web progressiva ottimale
Per creare un'app web progressiva davvero eccezionale, che sembri la migliore, non serve solo un elenco di controllo principale. L'elenco di controllo ottimale per le app web progressive consiste nel far sembrare che la PWA faccia parte del dispositivo su cui viene eseguita, sfruttando al contempo ciò che rende potente il web.
Fornisce un'esperienza offline
Laddove la connettività non è strettamente necessaria, l'app funziona come offline e online.
Perché
Oltre a fornire una pagina offline personalizzata, gli utenti si aspettano che le app web progressive siano utilizzabili offline. Ad esempio, le app di viaggi e compagnie aeree dovrebbero avere i dettagli dei viaggi e le carte d'imbarco disponibili quando sono 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 per l'autenticazione offline. Una PWA offline offre agli utenti un'esperienza simile a quella di un'app.
Come
Dopo aver determinato quali funzionalità i tuoi utenti si aspettano di usare offline, devi rendere i tuoi contenuti disponibili e adattabili ai contesti offline. Inoltre, puoi utilizzare IndexedDB, un sistema di archiviazione NoSQL integrato nel browser, per archiviare e recuperare i dati, nonché la sincronizzazione in background per consentire agli utenti di eseguire azioni offline e rimandare le comunicazioni con il server fino a quando l'utente non avrà di nuovo una connessione stabile. Puoi anche utilizzare i service worker per archiviare altri tipi di contenuti, ad esempio immagini, file video e file audio per l'utilizzo offline. Dal punto di vista dell'esperienza utente, puoi utilizzare scheletri che offrono agli utenti un'idea della velocità e dei contenuti durante il caricamento, che possono poi tornare ai contenuti memorizzati nella cache o a un indicatore offline, se necessario.
Sia completamente accessibile
Tutte le interazioni degli utenti soddisfano i requisiti di accessibilità WCAG 2.0.
Perché
A un certo punto della vita, la maggior parte delle persone vorranno sfruttare la tua PWA in un modo coperto dai requisiti di accessibilità WCAG 2.0. La capacità degli esseri umani di interagire con la PWA e di comprenderla esiste in uno spettro e può essere temporanea o permanente. Se rendi accessibile la PWA, puoi assicurarti che sia utilizzabile da tutti.
Come
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 per l'accessibilità in Lighthouse, Ax e Statistiche accessibilità possono aiutarti ad automatizzare alcuni test di accessibilità. Inoltre, è importante utilizzare elementi semanticamente corretti, invece di ricrearli autonomamente, ad esempio gli elementi a e button. In questo modo, quando è necessario creare funzionalità più avanzate, vengano soddisfatte le aspettative accessibili (ad esempio quando utilizzare frecce e schede).
Schede nutrizionali A11Y offre ottimi consigli
a riguardo per alcuni componenti comuni.
Possono essere scoperti tramite la ricerca
La tua PWA può essere scoperta tramite la ricerca.
Perché
Uno dei maggiori vantaggi del web è la possibilità di scoprire siti e app tramite la ricerca. Infatti, più della metà di tutto il traffico sul sito web proviene dalla ricerca organica. È fondamentale che gli utenti possano trovare la PWA per assicurarsi che esistano URL canonici per i contenuti e che i motori di ricerca possano indicizzare il sito. Questo vale soprattutto per l'adozione del rendering lato client.
Come
Inizia assicurandoti che ogni URL abbia un titolo e una meta descrizione univoci e descrittivi. Dopodiché puoi utilizzare Google Search Console e i controlli di 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 webmaster di Bing o Yandex e valutare la possibilità di includere i dati strutturati utilizzando gli schemi di Schema.org nella tua PWA.
Compatibile con qualsiasi tipo di input
La PWA può essere usata allo stesso modo con un mouse, una tastiera, uno stilo o un tocco.
Perché
I dispositivi offrono diversi metodi di immissione e gli utenti devono essere in grado di passare senza problemi da uno all'altro durante l'utilizzo dell'applicazione. Altrettanto importanti, i metodi di immissione non devono dipendere dalle dimensioni dello schermo, il che significa che le aree visibili di grandi dimensioni devono supportare il tocco, mentre quelle piccole devono supportare tastiere e mouse. Al meglio delle tue capacità, assicurati che l'applicazione e tutte le sue funzionalità supportino l'utilizzo di qualsiasi metodo di inserimento scelto dall'utente. Ove opportuno, dovresti anche migliorare le esperienze per consentire anche controlli specifici per l'input (ad esempio il pull per l'aggiornamento).
Come
L'API Pointer Eventi fornisce un'interfaccia unificata per lavorare con varie opzioni di input ed è particolarmente utile per aggiungere il supporto per stilo. Per supportare sia il tocco che la tastiera, assicurati di utilizzare gli elementi semantici corretti (ancoraggi, pulsanti, controlli del modulo e così via) e di non ricrearli con HTML non semantico (ideale per l'accessibilità). Quando includi le interazioni che si attivano al passaggio del mouse, assicurati che possano essere attivate anche al clic o al tocco.
Fornisce il contesto per le richieste di autorizzazione
Quando chiedi l'autorizzazione per usare API potenti, fornisci un contesto e chiedi solo quando l'API è necessaria.
Perché
Le API che attivano una richiesta di autorizzazione, come notifiche, geolocalizzazione e credenziali, sono progettate intenzionalmente per essere disturbate per un utente, perché tendono a essere correlate a funzionalità potenti che richiedono l'attivazione. L'attivazione di questi prompt senza ulteriore contesto, ad esempio al caricamento della pagina, riduce le probabilità che gli utenti accettino queste autorizzazioni e la loro diffidenza in futuro. Attiva invece questi prompt solo dopo aver fornito una motivazione in contesto all'utente per il motivo per cui hai bisogno di questa autorizzazione.
Come
L'articolo sull'UX delle autorizzazioni e l'articolo I modi giusti per chiedere le autorizzazioni agli utenti di UX Planet di UX Planet sono ottime risorse per capire come progettare richieste di autorizzazione che, pur concentrandosi sui dispositivi mobili, si applicano a tutte le PWA.
Segue le best practice per un codice integro
Mantenere il codebase integro ti consente di raggiungere i tuoi obiettivi e offrire nuove funzionalità più facilmente.
Perché
La creazione di un'applicazione web moderna richiede molto lavoro. Mantenere aggiornata la tua applicazione e il tuo codebase integro ti consente di fornire più facilmente nuove funzionalità che soddisfano gli altri obiettivi definiti in questo elenco di controllo.
Come
Esistono una serie di controlli ad alta priorità per garantire un codebase integro: evitare di utilizzare librerie con vulnerabilità note, assicurarsi di non utilizzare API deprecate, rimuovere gli anti-pattern web dal codebase (ad esempio utilizzare document.write() o avere listener di eventi di scorrimento non passivi) e persino programmare in modo difensivo per garantire che la PWA non si interrompa in caso di mancato caricamento delle analisi o di altre librerie di terze parti. Valuta la possibilità di richiedere l'analisi del codice statico, come il lint, nonché test automatici, in più browser e canali di rilascio. Queste tecniche possono aiutarti a individuare
gli errori prima che siano in produzione.