Le app web progressive (PWA) sono progettate e migliorate con API moderne per offrire funzionalità migliorate, affidabilità e installabilità, raggiungendo al contempo chiunque, ovunque, su qualsiasi dispositivo con un singolo codebase. Per aiutarti a creare la migliore esperienza possibile, utilizza i checklist e i consigli di base e ottimali.
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 utilizzabili da tutti gli utenti, indipendentemente dalle dimensioni o dal tipo di input.
Il rendimento gioca un ruolo importante per il successo di qualsiasi perché i siti ad alte prestazioni coinvolgono e trattengono meglio gli utenti rispetto a quelli con un rendimento basso. Concentrati sull'ottimizzazione per metriche sul rendimento.
Perché
La velocità è fondamentale per convincere gli utenti a usare la tua app.
Infatti, con l'aumento dei tempi di caricamento della pagina da un secondo a dieci secondi,
la probabilità di rimbalzo di un utente aumenta del 123%. Le prestazioni non si fermano nemmeno con l'evento load. Gli utenti non devono mai chiedersi
se la loro interazione, ad esempio un clic su un pulsante, sia stata
registrata o meno. Lo scorrimento e l'animazione devono essere fluidi.
Le prestazioni influiscono sull'intera esperienza, sia sul modo in cui l'app
si comporta e come gli utenti la percepiscono.
Sebbene tutte le applicazioni abbiano esigenze diverse, i controlli delle prestazioni Lighthouse si basano sui Core Web Vitals, e se ottieni punteggi elevati nei controlli aumenteranno le probabilità che gli utenti ricevano un'esperienza piacevole. Puoi anche utilizzare PageSpeed Insights o Report sull'esperienza utente di Chrome per ottenere dati reali sulle prestazioni della tua applicazione web.
Come
Segui la nostra guida sui tempi di caricamento rapidi per scopri come fare in modo che la tua PWA si avvii rapidamente e sia sempre veloce.
Gli utenti possono utilizzare qualsiasi browser 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 più browser.
Un modo efficace per farlo, secondo Jeremy Keith nel suo libro Resilient Web Design, è identificare le funzionalità di base, renderle disponibili utilizzando la tecnologia più semplice possibile e poi migliorare l'esperienza, se possibile. In molti casi, significa iniziare solo con 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 la creazione
che ti permette di migliorare l'esperienza con JavaScript per
la convalida e l'invio del modulo 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 è un'ottima risorsa che descrive come approcciarsi al web design in questa metodologia progressiva cross-browser.
Letture aggiuntive
- L'articolo Understanding Progressive Enhancement di A 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 link ad argomenti più avanzati.
- L'articolo Implementing feature detection di MDN illustra come rilevare una funzionalità eseguendo una query direttamente su di essa.
Gli utenti possono utilizzare la tua PWA su qualsiasi dimensione di schermo e tutti i suoi contenuti disponibili in qualsiasi dimensione dell'area visibile.
Perché
I dispositivi sono disponibili in diverse dimensioni e gli utenti possono utilizzare la tua applicazione all'indirizzo di dimensioni diverse, 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 indipendentemente dalle 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 contenuti per diverse dimensioni dell'area visibile e tutto dovrebbe essere presente, 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 design del sito:
I dispositivi mobili richiedono ai team di sviluppo software di concentrarsi solo sui dati e sulle azioni più importanti di un'applicazione. In 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 raccolta di concetti importanti correlati, nonché una vasta gamma di libri e conferenze. Per restringere questo per approfondire gli aspetti relativi ai contenuti del responsive design, consulta design incentrato sui contenuti e layout reattivi per i contenuti. Infine, anche se si concentrano sui dispositivi mobili, le lezioni di Seven Deadly Mobile Myths di Josh Clark sono pertinenti sia per le visualizzazioni di piccole dimensioni dei siti responsivi sia per i dispositivi mobili in generale.
Quando gli utenti sono offline, conservarli nella PWA offre una maggiore un'esperienza fluida rispetto al passaggio al browser predefinito offline .
Perché
Gli utenti si aspettano che le app installate funzionino a prescindere dalla connessione . Un'app specifica per la piattaforma non mostra mai una pagina vuota quando è offline e una PWA non deve 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 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. Paga
Creare una pagina di riserva offline
per imparare a implementarla autonomamente. Tieni presente che Chrome
mostrare una pagina offline di base se non ne viene specificata nessuna.
Gli utenti che installano o aggiungono app sul proprio dispositivo tendono a interagire di più con queste app.
Perché
L'installazione di un'app web progressiva consente di avere un aspetto, un aspetto e un comportamento simili a quelli da 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 costituiscono il tuo pubblico più coinvolto e spesso hanno metriche sul coinvolgimento in linea con quelle degli utenti delle 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 all'installabilità per scoprire come rendere installabile la tua PWA.
Elenco di controllo per le app web progressive ottimali
Per creare una PWA davvero eccezionale, che sembri la migliore app del settore, devi avere molto più di un semplice elenco di controllo. L'elenco di controllo ottimale per le PWA consiste nel creare la PWA sembra essere parte del dispositivo su cui è in esecuzione mentre sfruttare ciò che rende potente il web.
Quando la connettività non è strettamente richiesta, la tua app funziona allo stesso modo offline come avviene 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 dovrebbero avere dettagli sul viaggio e tessere di imbarco subito disponibili quando sono offline. Le app di musica, video e podcasting devono consentire la riproduzione offline. Social e le app 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 offline, quindi progetta per l'autenticazione offline. Una PWA offline offre una vera e propria app per offrire agli utenti un'esperienza ottimale.
Come
Dopo aver stabilito quali funzionalità gli utenti si aspettano di poter lavorare offline, dovrai rendere i tuoi contenuti disponibili e adattabili a quelli offline, i contesti. Puoi utilizzare IndexedDB, uno sistema di archiviazione NoSQL in-browser, per archiviare e recuperare i dati e sincronizzazione in background per consentire agli utenti di eseguire azioni offline e rinviare le comunicazioni con il server finché la connessione non viene ripristinata. Puoi anche utilizzare il servizio ai worker per archiviare altri tipi di contenuti, come immagini, file video audio e file audio, per l'utilizzo offline e per implementare sessioni sicure e di lunga durata per mantenere gli utenti autenticati. Dal punto di vista dell'esperienza utente, puoi: utilizza scheletri gli utenti possono percepire la velocità e i contenuti durante il caricamento. quindi consulta i contenuti memorizzati nella cache o un indicatore offline, se necessario.
Tutte le interazioni degli utenti superano le WCAG 2.0 requisiti di accessibilità.
Perché
La maggior parte degli utenti, a un certo punto della propria vita, vuole usare la PWA in un modo in base alle WCAG 2.0 requisiti di accessibilità. Umani di interagire con capire se la tua PWA esiste in uno spettro e le esigenze possono essere temporanee in modo permanente. Se rendi accessibile la tua PWA, la rendi utilizzabile da tutti.
Come
di W3C
Introduzione all'accessibilità web
è un buon punto di partenza. Gran parte dei test di accessibilità deve essere
manualmente. Strumenti come Accessibilità
controlli in Lighthouse, axe,
e insight sull'accessibilità
può aiutarti ad automatizzare alcuni test sull'accessibilità. È inoltre importante
utilizzare elementi semanticamente corretti anziché ricrearli
autonomamente, ad esempio gli elementi a e button. In questo modo ti assicuri che, quando devi creare modelli
vengono soddisfatte le aspettative di accessibilità (ad esempio quando usare le frecce
e schede).
Le schede di A11Y per le informazioni nutrizionali forniscono ottimi consigli su questo argomento per alcuni componenti comuni.
La tua PWA può essere facilmente scoprita 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. 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 univoco e descrittivo una meta descrizione. 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 un 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. Esattamente come importante, i metodi di inserimento non devono dipendere dalle dimensioni dello schermo, il che significa le aree visibili di grandi dimensioni devono supportare il tocco, mentre le aree visibili piccole devono supportare tastiere e mouse. Per quanto possibile, assicurati che i tuoi dell'applicazione e tutte le sue funzionalità supportano l'utilizzo di qualsiasi metodo di immissione l'utente può scegliere. Ove opportuno, migliora le esperienze per consentire e controlli specifici dell'input (come il pull-to-refresh).
Come
L'API Pointer Events fornisce un'interfaccia unificata per lavorare con varie opzioni di input ed è particolarmente utile per aggiungere il supporto dello 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 ulteriore contesto, ad esempio al caricamento della pagina, riduce le probabilità che gli utenti accettino queste autorizzazioni e di cui non ti fidi 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 UX 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 integro il tuo codebase ti consente di raggiungere più facilmente i tuoi obiettivi offrire nuove funzionalità.
Perché
La creazione di un'applicazione web moderna richiede molto lavoro. Conservazione aggiornare l'applicazione e il codebase integro facilita offrire nuove funzionalità che soddisfano gli altri obiettivi stabiliti in questo elenco di controllo.
Come
Esistono diversi controlli di alta priorità per garantire un codebase sano:
- Evita di utilizzare librerie con vulnerabilità note.
- Assicurati di non utilizzare API deprecate.
- Rimuovi le pratiche di programmazione non sicure dal tuo codebase (ad esempio utilizzando
document.write()o evento di scorrimento non passivo ascoltatori), - Puoi persino scrivere il codice in modo difensivo per assicurarti che la PWA non si rompa o altre librerie di terze parti.
- Potresti richiedere l'analisi statica del codice, come l'analisi tramite lint, nonché test automatici in più browser e canali di rilascio. Questi tecniche possono aiutare a individuare gli errori prima che li mettano in produzione.