Le app web progressive (PWA) sono create e migliorate con API moderne per offrire funzionalità, affidabilità e installabilità avanzate, raggiungendo chiunque, ovunque e su qualsiasi dispositivo con un unico codebase. Per aiutarti a creare la migliore esperienza possibile, utilizza le liste di controllo e i consigli principali e ottimali.
Elenco di controllo delle app web progressive di base
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 significativo nel successo di qualsiasi esperienza online, perché i siti con un rendimento elevato coinvolgono e trattengono meglio gli utenti di quelli con un rendimento basso. Concentrati sull'ottimizzazione per le metriche di rendimento incentrate sugli utenti.
Perché
La velocità è fondamentale per convincere gli utenti a utilizzare la tua app. Infatti, man mano che i tempi di caricamento della pagina aumentano da 1 a 10 secondi, la probabilità di rimbalzo di un utente aumenta del 123%. Le prestazioni non si fermano con l'evento load. Gli utenti non devono mai chiedersi se la loro interazione, ad esempio
il clic su un pulsante, è stata registrata o meno. Lo scorrimento e l'animazione devono essere 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 del rendimento in Lighthouse si basano sui Segnali web essenziali e ottenere un punteggio elevato in questi controlli aumenterà 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 sulle prestazioni reali della tua app web.
Come
Segui la nostra guida sui tempi di caricamento rapidi per scoprire come fare in modo che la tua PWA si avvii rapidamente e mantenga la velocità.
Funziona in 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 app web, il che significa che devono funzionare su tutti i browser.
Un modo efficace per farlo è, secondo Jeremy Keith in Resilient Web Design, identificare le funzionalità di base, renderle disponibili utilizzando la tecnologia più semplice possibile e poi migliorare l'esperienza laddove possibile. In molti casi, ciò significa iniziare con il solo HTML per creare le 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 tramite AJAX, migliorando l'esperienza per gli utenti che possono supportarlo.
I tuoi utenti visitano il tuo sito su una vasta gamma di dispositivi e browser. Non puoi rivolgerti solo alla fascia più alta dello spettro. Utilizza il rilevamento delle funzionalità per offrire un'esperienza utilizzabile per la più ampia gamma possibile di potenziali utenti, inclusi quelli che utilizzano browser e dispositivi che non esistono ancora.
Come
Resilient Web Design di Jeremy Keith è un'ottima risorsa che descrive come pensare al web design in questa metodologia progressiva cross-browser.
Letture aggiuntive
- L'articolo Understanding Progressive Enhancement di A List Apart è una buona introduzione all'argomento.
- L'articolo di Smashing Magazine Progressive Enhancement: What It Is, And How To Use It? offre un'introduzione pratica e link ad argomenti più avanzati.
- L'articolo Implementazione del rilevamento delle funzionalità di MDN spiega come rilevare una funzionalità eseguendo una query diretta.
Adattabile a schermi di qualsiasi dimensione
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 varie dimensioni e gli utenti potrebbero utilizzare la tua applicazione in varie dimensioni, anche sullo stesso dispositivo. Pertanto, è fondamentale assicurarsi che i tuoi contenuti rientrino nell'area visibile e 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 in base alle dimensioni dell'area visibile. Puoi riorganizzare i contenuti per diverse dimensioni della finestra e dovrebbero essere tutti presenti, in un modo o nell'altro. Infatti, come afferma Luke Wroblewski nel suo libro Mobile First, iniziare con poco e modificare il design per schermi più grandi può migliorarlo:
"I dispositivi mobili richiedono ai team di sviluppo software di concentrarsi solo sui dati e sulle azioni più importanti di un'applicazione. Semplicemente non c'è spazio in uno schermo da 320 x 480 pixel per elementi estranei e non necessari. Devi dare la priorità."
Come
Esistono molte risorse sul design responsivo, tra cui: l'articolo originale di Ethan Marcotte e una raccolta di concetti importanti correlati, oltre a numerosi libri e conferenze.
Per restringere questa discussione agli aspetti dei contenuti del design adattabile, consulta:
- Progettazione incentrata sui contenuti
- Layout adattabili con contenuti in evidenza.
- Seven Deadly Mobile Myths, che è altrettanto pertinente per le visualizzazioni di dimensioni ridotte dei siti adattabili quanto per tutti i dispositivi mobili.
Fornisce una pagina offline personalizzata
Quando gli utenti sono offline, mantenerli nella tua PWA offre un'esperienza più fluida 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 per la 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 tenta di utilizzare una funzionalità che richiede una connessione, contribuisce a rendere l'esperienza web parte del dispositivo su cui viene eseguita.
Come
Durante l'evento install di un service worker, puoi prememorizzare nella cache una pagina offline personalizzata da mostrare quando un utente va offline. Leggi
Creare una pagina di riserva offline per scoprire come
implementarla autonomamente. Chrome continua a mostrare una
pagina offline di base se non
ne viene fornita una.
È 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 le consente di avere l'aspetto, il design e il comportamento di tutte le altre app installate. Viene avviata dalla stessa posizione da 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 hanno metriche di coinvolgimento alla pari con gli utenti delle app sui dispositivi mobili. Queste metriche includono più visite ripetute, tempi più lunghi sul tuo sito e tassi di conversione più elevati rispetto ai visitatori tipici.
Come
Segui la nostra guida installabile.
Elenco di controllo ottimale per le app web progressive
Per creare un'app web progressiva davvero eccezionale, che sembri un'app di prima categoria, hai bisogno di molto più della semplice checklist di base. L'elenco di controllo ottimale per le PWA riguarda la creazione di un'esperienza che faccia sembrare la PWA parte del dispositivo su cui viene eseguita, sfruttando al contempo ciò che rende il web potente.
Offre un'esperienza offline
Nei casi in cui la connettività non è strettamente necessaria, l'app funziona offline come online.
Perché
Oltre a fornire una pagina offline personalizzata, gli utenti si aspettano che le PWA siano utilizzabili offline. Ad esempio, le app di viaggi e compagnie aeree devono avere i dettagli del viaggio e le carte d'imbarco facilmente disponibili quando sono offline. Le app di musica, video e podcast devono consentire la riproduzione offline. Le app di social e notizie devono memorizzare nella cache i contenuti recenti in modo che gli utenti possano leggerli offline. Gli utenti si aspettano anche di rimanere autenticati quando sono offline, quindi progetta l'autenticazione offline.
Una PWA offline offre agli utenti un'esperienza simile a quella di un'app.
Come
Dopo aver determinato quali funzionalità si aspettano i tuoi utenti che funzionino offline, devi rendere i tuoi contenuti disponibili e adattabili ai contesti offline. Puoi utilizzare IndexedDB, un sistema di archiviazione NoSQL nel browser, per archiviare e recuperare i dati, e la sincronizzazione in background per consentire agli utenti di eseguire azioni offline e posticipare le comunicazioni con il server finché non avranno di nuovo una connessione stabile. Puoi utilizzare i service worker per archiviare altri tipi di contenuti, come immagini, file video e file audio, per l'utilizzo offline e per implementare sessioni sicure e di lunga durata per mantenere l'autenticazione degli utenti.
Dal punto di vista dell'esperienza utente, puoi utilizzare schermate scheletro che danno agli utenti una percezione di velocità e contenuti durante il caricamento, che poi possono tornare ai contenuti memorizzati nella cache o a un indicatore offline, se necessario.
Completamente accessibile
Tutte le interazioni degli utenti superano lo standard internazionale Web Content Accessibility Guidelines (WCAG) più recente.
Perché
La maggior parte degli utenti, a un certo punto della propria vita, vuole utilizzare la tua PWA in un modo coperto dalle WCAG. La capacità delle persone di interagire con la tua PWA e comprenderla varia e le esigenze possono essere temporanee o permanenti. Rendendo accessibile la tua PWA, la rendi utilizzabile da tutti.
Come
L'introduzione all'accessibilità web del W3C
è un ottimo punto di partenza. La maggior parte dei test di accessibilità deve essere eseguita
manualmente. Controllo dell'accessibilità in Lighthouse,
axe e
Accessibility Insights possono aiutarti
ad automatizzare alcuni test di accessibilità. È anche importante utilizzare elementi semanticamente
corretti anziché ricrearli autonomamente, ad esempio gli elementi <a>
e <button>. In questo modo, quando devi creare funzionalità più avanzate, le aspettative di accessibilità vengono soddisfatte, ad esempio quando utilizzare le frecce anziché le schede.
Schede nutrizionali A11Y forniscono ottimi consigli su questo argomento per alcuni componenti comuni.
Rintracciabile nella ricerca
La tua PWA può essere facilmente trovata tramite la ricerca.
Perché
Uno dei maggiori vantaggi del web è la possibilità di scoprire siti e app tramite la ricerca. Infatti, oltre la metà di tutto il traffico del sito web proviene dalla ricerca organica. Assicurarsi 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. Ciò è particolarmente vero quando si adotta il rendering lato client.
Come
Inizia assicurandoti che ogni URL abbia un titolo e una meta descrizione unici e descrittivi. Poi puoi utilizzare Google Search Console e gli audit di ottimizzazione per i motori di ricerca in Lighthouse per eseguire il debug e risolvere i problemi di rilevabilità 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 schemi di Schema.org nella tua PWA.
Funziona con qualsiasi tipo di input
La tua PWA è ugualmente utilizzabile con un mouse, una tastiera, uno stilo o il tocco.
Perché
I dispositivi offrono una varietà di metodi di input e gli utenti devono essere in grado di passare facilmente da uno all'altro durante l'utilizzo dell'applicazione. Altrettanto importante, i metodi di input non devono dipendere dalle dimensioni dello schermo, il che significa che le aree visibili grandi devono supportare il tocco e quelle piccole devono supportare tastiere e mouse. Per quanto possibile, assicurati che la tua applicazione e tutte le sue funzionalità supportino l'utilizzo di qualsiasi metodo di input scelto dall'utente. Se opportuno, migliora le esperienze per consentire anche controlli specifici per l'input (ad esempio, tira per aggiornare).
Come
L'API Pointer Events fornisce un'interfaccia unificata per l'utilizzo di varie opzioni di input ed è particolarmente adatta per aggiungere il supporto dello stilo. Per supportare sia il tocco che la tastiera, assicurati di utilizzare gli elementi semantici corretti (ancore, pulsanti, controlli dei moduli e così via) e di non ricrearli con HTML non semantico. Quando includi interazioni che si attivano al passaggio del mouse, assicurati che possano attivarsi anche con un clic o un tocco.
Fornisce il contesto per le richieste di autorizzazione
Quando chiedi l'autorizzazione per utilizzare API potenti, fornisci il contesto e chiedila solo quando l'API è necessaria.
Perché
Le API che attivano una richiesta di autorizzazione, come notifiche, geolocalizzazione e credenziali, sono intenzionalmente progettate per interrompere l'esperienza di un utente perché tendono a essere correlate a funzionalità potenti che richiedono l'attivazione. L'attivazione di questi prompt senza un contesto aggiuntivo, ad esempio durante il caricamento della pagina, rende meno probabile che gli utenti accettino queste autorizzazioni e più probabile che non si fidino in futuro.
Attiva invece questi prompt solo dopo aver fornito all'utente una motivazione contestuale per cui hai bisogno di questa autorizzazione.
Come
L'articolo Esperienza utente per le autorizzazioni e l'articolo di UX Planet The Right Ways to Ask Users for Permissions sono buone risorse per capire come progettare prompt di autorizzazione che, sebbene incentrati sui dispositivi mobili, si applicano a tutte le PWA.
Segue le best practice per un codice sano
Mantenere sano il tuo codice sorgente ti consente di raggiungere più facilmente i tuoi obiettivi e di fornire nuove funzionalità.
Perché
La creazione di un'applicazione web moderna richiede molto lavoro. Mantenere aggiornata l'applicazione e il codice base in buono stato ti consente di implementare più facilmente nuove funzionalità che soddisfano gli altri obiettivi indicati in questo elenco di controllo.
Come
Esistono diversi controlli ad alta priorità per garantire un codebase integro:
- Evita di utilizzare librerie con vulnerabilità note.
- Assicurati di non utilizzare API ritirate.
- Rimuovi dal codebase pratiche di codifica non sicure, ad esempio
document.write()o l'utilizzo di listener di eventi di scorrimento non passivi. - Puoi persino programmare in modo difensivo per assicurarti che la tua PWA non si interrompa se le librerie di analisi o di terze parti non vengono caricate.
- Valuta la possibilità di richiedere l'analisi statica del codice, come il linting, nonché test automatizzati in più browser e canali di rilascio. Queste tecniche possono aiutarti a rilevare gli errori prima che vengano pubblicati in produzione.