Passaggi iniziali
Le app web progressive sono ancora siti web con funzioni e capacità avanzate. Non sono collegati a uno stack tecnologico specifico e puoi iniziare da zero con un nuovo sito o aggiornare il sito web esistente senza una revisione completa. In questa guida imparerai a creare una buona implementazione del pattern PWA. Ecco alcune strategie per iniziare:
Rendi l'app installabile
Inizia con poco! Questo approccio include iniziare con un file manifest di base, una semplice pagina offline e un service worker per gestire la pagina offline e memorizzare nella cache alcuni CSS e JavaScript fondamentali. Grazie alla memorizzazione nella cache di JavaScript e CSS fondamentale, renderai la tua app web esistente pronta per funzionare offline, migliorandone le prestazioni.
Imposta lo stato attivo su una funzionalità
Scegli una nuova funzionalità, come le notifiche push o la gestione dei file, che avrà un impatto significativo sui tuoi utenti o sulla tua attività. In questo modo, potrai immergerti nel pool di PWA senza apportare troppe modifiche contemporaneamente.
Crea una versione semplice
Recupera una sezione esistente della tua applicazione o un percorso dell'utente specifico, come la riproduzione di un video o l'accesso a una carta d'imbarco, e fai in modo che funzioni fronte-retro come PWA offline, in modalità autonoma o nel contesto. Ciò consente un esperimento a basso costo che ti consente di ripensare un'esperienza per gli utenti con le PWA.
Inizia dall'inizio
Se stai pensando di rinnovare il tuo sito web o se vuoi ricominciare da zero, questa strategia è adatta alla scelta. Consente di creare più facilmente pattern di progettazione PWA rispetto ad altre strategie, in particolare per sfruttare tutta la potenza dei service worker sin dall'inizio.
Upgrade di un'app dello store
Se puoi pubblicare una PWA negli store, puoi includere la PWA in un programma di avvio PWA e caricarla negli store, ad esempio sul Play Store di Google o su Windows Store. Se hai già un'app specifica per la piattaforma, puoi sostituirla con la PWA pubblicata nello store.
Con questo approccio, gli utenti esistenti ricevono un upgrade delle loro esperienze alla PWA, mentre i nuovi utenti possono comunque utilizzare o installare la PWA dal browser o dagli store. Inoltre, avrai un'unica app per tutti, risparmiando tempo e risparmiando tempo, migliorando l'esperienza utente.
Elenco di controllo PWA
Un'app web progressiva è un sito web e questo porta alla domanda: quando diventa un'app web progressiva? La risposta non è così semplice, in quanto il concetto di PWA non fa riferimento a una tecnologia o a uno stack specifico, ma PWA è invece un pattern che include vari componenti tecnici.
Sebbene non esistano regole univoche tra tutti i browser, esiste una serie di consigli, chiamati elenco di controllo delle app web progressive, per aiutarti a creare una PWA che gli utenti ameranno.
Requisiti principali
Dato che le PWA comprendono tutti i dispositivi, dai dispositivi mobili ai computer, l'elenco di controllo principale delle app web progressive riguarda ciò che devi fare per rendere la tua app installabile e affidabile per tutti gli utenti, indipendentemente dalle dimensioni dello schermo o dal tipo di input.
I requisiti fondamentali sono:
Rapidità di avvio e di esecuzione
Il rendimento svolge un ruolo importante per il successo di qualsiasi esperienza online, poiché i siti ad alto rendimento coinvolgono e fidelizzano gli utenti meglio di quelli con un rendimento scarso. I siti dovrebbero concentrarsi sull'ottimizzazione in funzione di metriche sul rendimento incentrate sull'utente.
Funziona con qualsiasi browser
Le app web progressive sono innanzitutto le app web, il che significa che devono funzionare su più browser, non solo in uno. Tuttavia, l'esperienza non deve essere necessariamente la stessa in tutti i browser. Alcune funzionalità potrebbero non essere supportate da un singolo browser, ma un'opzione di riserva garantisce un'esperienza positiva.
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.
Fornisce una pagina offline personalizzata
Quando gli utenti sono offline, tenerli nella PWA offre un'esperienza più fluida e simile a quella del tornare alla pagina offline del browser predefinito.
Installabile
Gli utenti che installano o aggiungono app alle schermate Home tendono a interagire maggiormente con queste app e, quando viene installata, la PWA può sfruttare più funzionalità per un'esperienza utente migliore.
Caratteristiche ottimali della PWA
Per creare un'app web progressiva davvero eccezionale, che sembri un'app eccellente, non ti serve solo un elenco di controllo. L'elenco di controllo ottimale per le app web progressive riguarda come far sentire la tua PWA capace e affidabile e, al contempo, sfruttare ciò che rende potente il web.
Fornisce un'esperienza offline
Se consenti agli utenti di utilizzare la PWA mentre sono offline, creerai un'esperienza simile a un'app autentica per loro. Per farlo, identifica le funzionalità che non richiedono connettività, in modo che gli utenti possano accedere ad almeno alcune funzionalità.
Sia completamente accessibile
Assicurati che tutti i contenuti e le interazioni dell'applicazione siano compresi dagli screen reader, utilizzabili solo con una tastiera, che sia indicata la messa a fuoco e che il contrasto di colore sia forte. Se rendi accessibile la PWA, ti assicuri che possa essere usata da tutti.
Utilizzano potenti funzionalità, se disponibili
Dalla messaggistica push, WASM e WebGL all'accesso al file system, ai selettori dei contatti e all'integrazione con gli app store. Gli strumenti per creare PWA altamente performanti e profondamente integrate ti consentono di creare un'esperienza utente completa, precedentemente riservata alle app della piattaforma, che i tuoi utenti possono portare con sé ovunque.
È rilevabile tramite la ricerca
Più della metà di tutto il traffico sul sito web proviene dalla ricerca organica. È fondamentale che gli utenti trovino la tua PWA e che esistano URL canonici per i contenuti e che i motori di ricerca possano indicizzare il tuo sito.
Compatibile con qualsiasi tipo di input
Gli utenti devono essere in grado di passare da un tipo di input all'altro mentre utilizzano l'applicazione senza problemi e i metodi di immissione non devono dipendere dalle dimensioni dello schermo.
Fornisce il contesto per le richieste di autorizzazione
Attiva le richieste di autorizzazioni come notifiche, geolocalizzazione e credenziali solo dopo aver fornito una motivazione nel contesto per migliorare le probabilità che l'utente accetti le richieste.
Segue le best practice per un codice integro
Mantenere l'applicazione aggiornata e il tuo codebase integro ti consente di fornire più facilmente nuove funzionalità che soddisfano gli altri obiettivi definiti in questo elenco di controllo.