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 delle app web progressive descrive che 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 in base alle metriche sul rendimento 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%. Le prestazioni non si fermano nemmeno con l'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 della tua app sia sulla percezione degli utenti.
Sebbene tutte le applicazioni abbiano esigenze diverse, i controlli del rendimento in Lighthouse si basano sui Core Web Vitals e un punteggio elevato in questi controlli aumenterà 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, rendendole disponibili utilizzando la tecnologia più semplice possibile e quindi migliorando 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 ad esempio l'invio di moduli. Il modo più semplice per implementarlo è tramite un
modulo HTML che invia una richiesta POST. Dopo averli creati, 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 utilizzano il tuo sito su una serie di dispositivi e browser. Non puoi scegliere come target solo la fascia più alta di questo spettro. Utilizza il rilevamento delle funzionalità per offrire un'esperienza utilizzabile per la gamma più ampia possibile di potenziali utenti, inclusi 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.
- Articolo di Smashing Magazine Progressive Enhancement: What It Is, And How To Use It? 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 tua 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. Pertanto, è fondamentale assicurarti non solo che i contenuti rientrino nell'area visibile, ma anche che tutte le funzionalità e i contenuti del tuo 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 ai team di sviluppo software di concentrarsi solo sui dati e sulle azioni più importanti di un'applicazione. Su uno schermo da 320 x 480 pixel non c'è semplicemente spazio per elementi estranei e non necessari. Devi dare la priorità.
Come
Esistono molte risorse sul design responsive, tra cui l'articolo originale di Ethan Marcotte, una collezione di concetti importanti correlati, nonché una vasta gamma di libri e conferenze. 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, mantenerli nella tua PWA offre un'esperienza più scorrevole rispetto al ritorno alla pagina offline del browser predefinito.
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 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 tenta di utilizzare una funzionalità che richiede una connessione, contribuisce a far sì che la tua esperienza web sembri parte del dispositivo su cui è in esecuzione.
Come
Durante l'evento install di un worker di servizio, puoi memorizzare in cache
una pagina offline personalizzata da mostrare quando un utente passa alla modalità offline. Consulta
Creare una pagina di riserva offline
per scoprire come implementarla autonomamente. Tieni presente che Chrome mostrerà una pagina offline di base se non ne viene fornita una.
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 avviata dalla stessa posizione in cui gli utenti avviano le altre app. Viene eseguita nella propria finestra dell'app, separata dal browser, e viene visualizzata nell'elenco di attività, 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 maggior numero di visite ripetute, un tempo di permanenza più lungo sul tuo 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 ottimale per le app web progressive
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.
Se la connettività non è strettamente necessaria, la tua app funziona allo stesso modo 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 di social media e di notizie devono memorizzare nella cache i contenuti recenti in modo che gli utenti possano leggerli offline. Gli utenti si aspettano inoltre di rimanere autenticati 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 stabilito quali funzionalità gli utenti si aspettano di poter utilizzare offline, devi rendere i tuoi contenuti disponibili e adattabili ai contesti offline. Puoi utilizzare IndexedDB, un sistema di archiviazione NoSQL in-browser, per archiviare e recuperare i dati e la sincronizzazione in background per consentire agli utenti di eseguire azioni offline e rimandare le comunicazioni con il server finché l'utente non avrà di nuovo 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 garantire l'autenticazione degli 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 tua PWA in un modo conforme ai requisiti di accessibilità delle WCAG 2.0. La capacità delle persone di interagire con la tua PWA e di comprenderla varia in base a una serie di fattori e le esigenze possono essere temporanee o permanenti. Se rendi accessibile la tua PWA, la rendi utilizzabile da 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
autonomamente, 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 rintracciata tramite 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 del sito web proviene dalla ricerca organica. Assicurati che esistano URL canonici per i contenuti e che i motori di ricerca possano indicizzare il tuo sito. È fondamentale per consentire ai potenziali utenti di trovare la tua PWA. Questo è particolarmente vero quando si adotta il rendering lato client.
Come
Per prima cosa, assicurati che ogni URL abbia un titolo e una meta descrizione unici e descrittivi. Puoi quindi 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 visibilità della tua PWA. Puoi anche utilizzare gli strumenti per i proprietari di siti di Bing o Yandex e prendere in considerazione l'inclusione di 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 tocco.
Perché
I dispositivi offrono una serie di metodi di inserimento e gli utenti devono essere in grado di transitare facilmente da uno all'altro durante l'utilizzo della tua applicazione. Altrettanto importante, i metodi di inserimento non devono dipendere dalle dimensioni dello schermo, il che significa che le aree visibili grandi devono supportare il tocco e quelle piccole tastiere e mouse. Nel miglior modo possibile, assicurati che la tua applicazione e tutte le sue funzionalità supportino l'utilizzo di qualsiasi metodo di inserimento scelto dall'utente. Ove opportuno, migliora le esperienze per consentire anche i controlli specifici per i dati inseriti (ad esempio il trascinamento per aggiornare).
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 sia la tastiera, assicurati di utilizzare gli elementi semantici corretti (ancore, pulsanti, controlli di modulo e così via) e di non ricostruirli con HTML non semantico. Quando includi interazioni che si attivano al passaggio del mouse, assicurati che possano essere attivate anche al clic o al tocco.
Quando chiedi l'autorizzazione a utilizzare API potenti, fornisci il 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 invasive per un utente perché tendono a essere correlate a funzionalità potenti 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 per la quale hai bisogno di questa autorizzazione.
Come
L'articolo Esperienza utente per le autorizzazioni e l'articolo di UX Planet I modi giusti per chiedere autorizzazioni agli utenti sono ottime risorse per capire come progettare richieste di autorizzazione che, pur essendo incentrate sui dispositivi mobili, si applicano a tutte le PWA.
Mantenere la base di codice sana semplifica il raggiungimento dei tuoi obiettivi e l'implementazione di nuove funzionalità.
Perché
Sono molti gli aspetti che richiedono la creazione di un'applicazione web moderna. Mantenere l'applicazione aggiornata e il codebase integro ti semplifica la distribuzione di 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 codifica non sicure (ad esempio l'utilizzo di
document.write()o di ascoltatori 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.
- Valuta la possibilità di richiedere l'analisi statica del codice, come il linting, nonché i test automatici in più browser e canali di rilascio. Queste tecniche possono aiutare a individuare gli errori prima che diventino in produzione.