Fai in modo che la tua app web progressiva non sembri un sito web, ma un'app "reale"
Quando giochi a bingo di parole alla moda dell'applicazione web progressiva, è sicuro impostare su "Le PWA sono solo siti web". La documentazione relativa alle PWA di Microsoft concorda, lo diciamo su questo sito stesso e persino Frances Berriman e Alex Russell scrivono lo come nomination alle PWA. Sì, le PWA sono solo siti web, ma sono anche molto più di questo. Se eseguita correttamente, una PWA non sarà come un sito web, ma come un'app "reale". Ora, cosa significa sentirsi come un'app reale?
Per rispondere a questa domanda, vediamo l'app Podcasts di Apple come esempio. È disponibile su macOS su computer e su iOS (e iPadOS rispettivamente) sui dispositivi mobili. Mentre Podcasts è un'applicazione multimediale, le idee principali che espongo con il suo aiuto si applicano anche ad altre categorie di app.
Possibilità di esecuzione offline
Se facciamo un passo indietro e pensi alle applicazioni specifiche per piattaforma di cui disponi sul tuo cellulare o computer desktop, una cosa si distingue chiaramente: non ricevi mai nulla. Nell'app Podcasts, anche se sono offline, c'è sempre qualcosa. In assenza di connessione di rete, l'app si apre comunque. La sezione Classifiche non mostra contenuti. Viene visualizzato il messaggio Impossibile connettersi al momento associato a un pulsante Riprova. Potrebbe non essere l'esperienza più accogliente, ma ho qualcosa da dire.
L'app Podcasts segue il cosiddetto modello shell dell'app. Tutti i contenuti statici necessari per mostrare l'app principale vengono memorizzati nella cache locale, comprese le immagini decorative come le icone del menu a sinistra e le icone principali dell'interfaccia utente del player. I contenuti dinamici, ad esempio i dati di Classifiche, vengono caricati solo on demand, con contenuti di riserva memorizzati nella cache locale disponibili in caso di caricamento non riuscito. Leggi l'articolo Il modello di App Shell per scoprire come applicare questo modello di architettura alla tua app web.
Contenuti offline disponibili e contenuti multimediali riproducibili
Quando offline, tramite il riquadro a scomparsa a sinistra, posso comunque accedere alla sezione Scaricati e ascoltare le puntate del podcast scaricate, pronte per essere riprodotte, e visualizzate con tutti i metadati, come artwork e descrizioni.
I contenuti multimediali scaricati in precedenza possono essere pubblicati dalla cache, ad esempio utilizzando la formula Pubblica audio e video memorizzati nella cache dalla libreria Workbox. Gli altri contenuti possono essere sempre archiviati nella cache o in IndexedDB. Leggi l'articolo Archiviazione per il web per tutti i dettagli e per sapere quando utilizzare quale tecnologia di archiviazione. Se i tuoi dati devono essere archiviati in modo permanente senza il rischio di essere eliminati definitivamente quando la quantità di memoria disponibile sta per esaurirsi, puoi utilizzare l'API Persistent Storage.
Download proattivo in background
Quando sono di nuovo online, ovviamente posso cercare contenuti con una query come http 203 e, quando decido di iscrivermi al risultato di ricerca, il podcast HTTP 203, l'ultima puntata della serie viene scaricata immediatamente, senza fare domande.
Il download di una puntata del podcast è un'operazione che potrebbe richiedere più tempo. L'API Background Fetch ti consente di delegare i download al browser, che li gestisce in background. Su Android, il browser a sua volta può delegare ulteriormente questi download al sistema operativo, quindi non è necessario che il browser sia sempre in esecuzione. Una volta completato il download, il service worker dell'app si riattiva e puoi decidere cosa fare con la risposta.
Condivisione e interazione con altre applicazioni
L'app Podcasts si integra naturalmente con le altre applicazioni. Ad esempio, se faccio clic con il tasto destro del mouse su una puntata che mi piace, posso condividerla con altre app sul mio dispositivo, come l'app Messaggi. Inoltre, si integra naturalmente con gli appunti di sistema. Posso fare clic con il tasto destro del mouse su qualsiasi puntata e copiare il relativo link.
L'API Web Share e l'API Web Share Target consentono alla tua app di condividere e ricevere testi, file e link da e verso altre applicazioni sul dispositivo. Sebbene non sia ancora possibile per un'app web di aggiungere voci di menu al menu di scelta rapida integrato del sistema operativo, esistono molti altri modi per collegarsi ad altre app sul dispositivo e da altre app. Con l'API Async Clipboard, puoi leggere e scrivere in modo programmatico dati di testo e immagini (immagini PNG) negli appunti di sistema. Su Android, puoi utilizzare l'API Contact Picker per selezionare le voci dalla gestione contatti del dispositivo. Se offri sia un'app specifica per la piattaforma sia una PWA, puoi utilizzare l'API di app correlate installate per verificare se l'app specifica per la piattaforma è installata, nel qual caso non è necessario incoraggiare l'utente a installare l'app web progressiva o accettare le notifiche push web.
Aggiornamento dell'app in background in corso...
Nelle impostazioni dell'app Podcasts posso configurare l'app in modo che scarichi automaticamente le nuove puntate. Così non devo neanche pensarci, i contenuti aggiornati ci saranno sempre. Magia.
L'API Periodic Background Sync consente alla tua app di aggiornare regolarmente i contenuti in background senza che sia necessaria. Ciò significa che i nuovi contenuti sono disponibili in modo proattivo, quindi gli utenti possono iniziare ad analizzarli immediatamente ogni volta che decidono.
Stato sincronizzato sul cloud
Allo stesso tempo, le mie iscrizioni vengono sincronizzate su tutti i dispositivi che possiedo. In un mondo senza interruzioni, non devo preoccuparmi di mantenere sincronizzate le mie iscrizioni ai podcast manualmente. Allo stesso modo, non devo temere che la memoria del mio dispositivo mobile venga consumata dalle puntate che ho già ascoltato sul computer. Lo stato di riproduzione viene mantenuto sincronizzato e le puntate ascoltate vengono eliminate automaticamente.
La sincronizzazione dei dati sullo stato delle app è un'attività che puoi delegare all'API Background Sync. L'operazione di sincronizzazione in sé non deve avvenire immediatamente, ma solo alla fine, e forse anche quando l'utente ha già chiuso di nuovo l'app.
Controlli dei tasti multimediali hardware
Quando sono impegnato con un'altra applicazione, ad esempio quando leggo una pagina di notizie nel browser Chrome, posso comunque controllare l'app Podcasts con i tasti multimediali del mio laptop. Non è necessario passare all'app solo per mandare avanti o indietro.
Le chiavi multimediali sono supportate dall'API Media Session. In questo modo, gli utenti possono utilizzare i tasti multimediali hardware sulle tastiere fisiche o sulle cuffie o persino controllare l'app web dai tasti multimediali del software sugli smartwatch. Un'altra idea per semplificare le operazioni di ricerca è quella di inviare uno schema di vibrazione quando l'utente cerca una parte significativa dei contenuti, ad esempio superando i riconoscimenti di apertura o il limite di un capitolo.
Multitasking e scorciatoia app
Ovviamente posso sempre tornare indietro con l'app Podcast da qualsiasi luogo. L'app ha un'icona chiaramente distinguibile che posso inserire anche sul desktop o sul dock dell'applicazione in modo che Podcasts possa essere avviato immediatamente quando voglio.
Le app web progressive su computer e dispositivi mobili possono essere installate nella schermata Home, nel menu Start o nel dock delle applicazioni. L'installazione può avvenire in base a una richiesta proattiva o essere controllata completamente dallo sviluppatore dell'app. L'articolo Cosa serve per essere installabili? spiega tutto ciò che devi sapere. Quando sono multitasking, le PWA appaiono indipendenti dal browser.
Azioni rapide nel menu contestuale
Le azioni più comuni dell'app, Cerca nuovi contenuti e Cerca nuove puntate, sono disponibili direttamente dal menu contestuale dell'app nel dock. Tramite il menu Opzioni posso anche decidere di aprire l'app al momento dell'accesso.
Specificando le scorciatoie delle icone delle app nel file manifest delle app web della PWA, puoi registrare percorsi rapidi per le attività comuni che gli utenti possono raggiungere direttamente dall'icona dell'app. Sui sistemi operativi come macOS, gli utenti possono anche fare clic con il tasto destro del mouse sull'icona dell'app e impostare l'avvio dell'app al momento dell'accesso. È in corso l'elaborazione di una proposta da eseguire all'accesso.
Agisci come app predefinita
Altre applicazioni per iOS e persino siti web o email possono integrarsi con l'app Podcasts sfruttando lo schema URL podcasts://. Se seguo un link come podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 mentre sono nel browser, vengo indirizzato direttamente all'app Podcasts e posso decidere se iscrivermi o ascoltare il podcast.
Non è ancora possibile gestire gli schemi URL completamente personalizzati, ma è in corso il lavoro su una proposta per la gestione del protocollo degli URL per le PWA. Al momento, registerProtocolHandler() con un prefisso di schema web+ è l'alternativa migliore.
Integrazione del file system locale
Potresti non pensarci subito, ma l'app Podcasts si integra naturalmente con il file system locale. Quando scarico una puntata di un podcast, sul mio laptop viene archiviata in ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache. A differenza di ~/Documents, ovviamente questa directory non è destinata all'accesso diretto da parte dei normali utenti, ma è lì.
Nella sezione Contenuti offline viene fatto riferimento ad altri meccanismi di archiviazione oltre ai file.
L'API File System Access consente agli sviluppatori di accedere al file system locale del dispositivo. Puoi utilizzarla direttamente o tramite la libreria di supporto browser-fs-access, che fornisce in modo trasparente un fallback per i browser che non supportano l'API. Per motivi di sicurezza, le directory di sistema non sono accessibili dal web.
Aspetto e design della piattaforma
C'è una cosa più discreta che è evidente per un'applicazione iOS come Podcasts: nessuna delle etichette di testo è selezionabile e tutto il testo si confonde con il carattere di sistema del computer. Viene rispettata anche la scelta del tema cromatico di sistema (modalità Buio).
Utilizzando la proprietà CSS user-select
con il valore none,
puoi proteggere gli elementi dell'interfaccia utente dalla selezione accidentale.
Assicurati però di non abusare di questa proprietà per rendere deselezionabili i contenuti dell'app.
Deve essere utilizzato solo per elementi dell'interfaccia utente come i testi dei pulsanti e così via.
Il valore system-ui
per la proprietà CSS font-family consente di
specificare il carattere dell'interfaccia utente predefinito del sistema da utilizzare per la tua app.
Infine, l'app può rispettare la preferenza della combinazione di colori dell'utente rispettando la scelta di prefers-color-scheme, con un opzione di attivazione/disattivazione della modalità Buio
facoltativa per sostituirla.
Un altro aspetto da decidere potrebbe essere l'azione che il browser deve eseguire quando raggiunge il limite di un'area scorrevole, ad esempio per implementare il comando pull to refresh personalizzato.
Questo è possibile con la proprietà CSS overscroll-behavior.
Barra del titolo personalizzata
Quando esamini la finestra dell'app Podcast, noti che non ha una barra dei titoli e una barra degli strumenti integrate classiche, come, ad esempio, la finestra del browser Safari, ma un'esperienza personalizzata che appare come una barra laterale agganciata alla finestra del player principale.
Sebbene non sia al momento possibile, stiamo lavorando alla personalizzazione della barra dei titoli.
Tuttavia, puoi (e devi) specificare le proprietà display e
theme-color del file manifest dell'app web per
determinare l'aspetto e il design della finestra dell'applicazione e decidere quali controlli del browser predefiniti (potenzialmente nessuno) mostrare.
Animazioni rapide
Le animazioni in-app sono concise e fluide nei podcast. Ad esempio, quando apro il riquadro a scomparsa Note sulla puntata sulla destra, scorre elegantemente. Quando rimuovo un episodio dai miei download, le puntate rimanenti vengono visualizzate e consumano lo spazio sullo schermo liberato dall'episodio eliminato.
Le animazioni di esecuzione sul web sono sicuramente possibili se tieni conto di una serie di best practice descritte nell'articolo Animazioni e prestazioni. Le animazioni di scorrimento, come comunemente utilizzate nei contenuti impaginati o nei caroselli multimediali, possono essere notevolmente migliorate utilizzando la funzionalità Snap di scorrimento CSS. Per un controllo completo, puoi utilizzare l'API Web Animations.
Contenuti visualizzati al di fuori dell'app
L'app Podcast su iOS può mostrare contenuti in posizioni diverse dall'applicazione effettiva, ad esempio nella visualizzazione Widget del sistema o sotto forma di suggerimento Siri. Gli inviti all'azione proattivi e basati sull'utilizzo che richiedono un semplice tocco per interagire possono aumentare notevolmente la percentuale di ricoinvolgimento di un'app come Podcasts.
L'API Content Index consente alla tua applicazione di indicare al browser quali contenuti della PWA sono disponibili offline. Ciò consente al browser di mostrare questi contenuti al di fuori dell'app principale. Se esegui il markup di contenuti interessanti nella tua app come adatti alla riproduzione audio speakable e utilizzando il markup strutturato in generale, puoi aiutare i motori di ricerca e gli assistenti virtuali come l'Assistente Google a presentare le tue offerte in una luce ideale.
Widget per il controllo dei contenuti multimediali nella schermata di blocco
Durante la riproduzione di una puntata di un podcast, l'app Podcasts mostra uno splendido widget di controllo sulla schermata di blocco con metadati quali l'artwork della puntata, il titolo della puntata e il nome del podcast.
L'API Media Session consente di specificare metadati come artwork, titoli delle tracce e così via che vengono poi visualizzati nella schermata di blocco, sugli smartwatch o su altri widget multimediali nel browser.
Notifiche push
Le notifiche push sono diventate un po' un fastidio sul web (anche se ora i messaggi di notifica sono molto più discreti). Se usate correttamente, però, possono apportare un grande valore. Ad esempio, l'app Podcast per iOS può facoltativamente inviarmi notifiche relative alle nuove puntate dei podcast a cui ho effettuato l'iscrizione o consigliarne di nuovi, nonché inviarmi notifiche relative a nuove funzionalità dell'app.
L'API Push consente all'app di ricevere notifiche push in modo che tu possa informare gli utenti degli eventi degni di nota relativi alla PWA. Per le notifiche che dovrebbero attivarsi in un momento noto in futuro e che non richiedono una connessione di rete, puoi utilizzare l'API Notification Triggers.
Badge dell'icona dell'app
Ogni volta che sono disponibili nuove puntate per uno dei podcast a cui ho effettuato l'iscrizione, nell'icona della schermata Home di Podcasts viene visualizzato un badge dell'app che mi incoraggia a interagire nuovamente con l'app in modo non invadente.
Puoi impostare i badge delle icone delle app con l'API Badging. Questo è particolarmente utile quando la PWA ha un'idea di elementi "da leggere" o quando hai bisogno di un mezzo per attirare in modo discreto l'attenzione dell'utente sull'app.
La riproduzione dei contenuti multimediali ha la precedenza sulle impostazioni del risparmio energetico
Durante la riproduzione di podcast, lo schermo potrebbe spegnersi, ma il sistema non entrerà in modalità standby. Facoltativamente, le app possono tenere attivo anche lo schermo, ad esempio per visualizzare testi o didascalie.
L'API Screen Wake Lock consente di impedire lo spegnimento dello schermo. La riproduzione di contenuti multimediali sul web impedisce automaticamente al sistema di attivare la modalità standby.
Rilevamento delle app tramite uno store
Sebbene l'app Podcast faccia parte dell'esperienza desktop macOS, su iOS deve essere installata dall'App Store.
Una rapida ricerca di podcast, podcasts o apple podcasts attiva immediatamente l'app nell'App Store.
Anche se Apple non consente le PWA sull'App Store, su Android puoi inviare la tua PWA
in un'attività web attendibile.
Lo script bubblewrap rende questa operazione indolore.
Questo script è anche alla base interna della funzionalità di esportazione delle app Android di PWABuilder, che puoi utilizzare senza toccare la riga di comando.
Riepilogo delle funzionalità
La tabella seguente mostra una panoramica sintetica di tutte le funzionalità e fornisce un elenco di risorse utili per realizzarle sul web.
Conclusione
Le PWA hanno fatto molta strada dalla loro introduzione nel 2015. Nell'ambito di Project Fugu 🐡, il team interaziendale di Chromium sta lavorando per colmare le ultime lacune rimanenti. Seguendo anche solo alcuni dei consigli di questo articolo, puoi avvicinarti alla sensazione simile a un'app e far dimenticare agli utenti che hanno a che fare con "solo un sito web", perché, onestamente, alla maggior parte di loro non importa come è realizzata la tua app (e perché dovrebbe?), a condizione che sia un'app reale.
Ringraziamenti
L'articolo è stato esaminato da Kayce Basques, Joe Medley, Joshua Bell, Dion Almaer, Ade Oshineye, Pete LePage, Sam Thorogood, Reilly Grant{/17s, e