Rendi la tua PWA più simile a un'app

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.

Un iPhone e un MacBook uno accanto all'altro, su entrambi i quali è installata l'applicazione Podcasts.
Apple Podcasts su iPhone e su macOS (Fonte).

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 mostra il messaggio informativo "Impossibile connettersi al momento" quando non è disponibile una connessione di rete.
App Podcast senza connessione di rete.

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.

App Podcasts con una puntata scaricata di un podcast in riproduzione.
Le puntate dei podcast scaricate possono essere riprodotte anche senza rete.

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.

L'app Podcasts che scarica l'ultima puntata di un podcast subito dopo l'iscrizione.
Dopo aver effettuato l'iscrizione a un podcast, l'ultima puntata viene scaricata immediatamente.

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.

Il menu contestuale dell'app Podcast richiamato per la puntata di un podcast con l'opzione "Condividi puntata → Messaggi" selezionata.
Condivisione di una puntata del podcast con l'app Messaggi.

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.

Il menu delle impostazioni dell'app Podcast nella sezione "Generali", dove l'opzione "Aggiorna podcast" è impostata su "Ogni ora".
Podcast configurati per controllare le nuove puntate del podcast ogni ora.

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.

Il menu delle impostazioni dell'app Podcast nella sezione "Avanzate" in cui è attivata l'opzione "Sincronizza le iscrizioni su più dispositivi".
Lo stato è sincronizzato sul cloud.

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.

Magic Keyboard di Apple MacBook Pro con tasti multimediali con annotazioni.
I tasti multimediali consentono di controllare l'app Podcast (Fonte).

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.

Il selettore di attività di macOS con una serie di icone di app tra cui scegliere, una delle quali è l'app Podcasts.
Ritorno del multitasking all'app Podcast

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.

Menu contestuale dell'icona dell'app Podcasts che mostra le opzioni "Cerca" e "Cerca nuove puntate".
Le azioni rapide sono immediatamente disponibili direttamente dall'icona dell'app.

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.

Il browser Chrome mostra una finestra di dialogo di conferma che chiede all'utente se vuole aprire l'app Podcasts.
L'app Podcasts può essere aperta direttamente dal browser.

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.

Il Finder di macOS ha raggiunto la directory di sistema dell'app Podcast.
Le puntate dei podcast vengono archiviate in una speciale cartella dell'app di sistema.

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).

L'app Podcasts in modalità Buio.
L'app Podcasts supporta le modalità Luce e Buio.
L'app Podcasts in modalità Luce.
L'app utilizza il carattere di sistema predefinito.

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.

La barra dei riquadri e la barra degli strumenti integrate nel browser Safari.
Barra del titolo personalizzata dell'app Podcasts.
Barre dei titoli personalizzate di Safari e Podcasts.

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.

L'app Podcast con il riquadro a scomparsa "Note sulla puntata" espanso.
Le animazioni in-app, ad esempio l'apertura di un riquadro a scomparsa, sono molto rapide.

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.

Visualizzazione widget iOS che mostra l'app Podcasts che suggerisce una nuova puntata di un podcast.
I contenuti dell'app vengono visualizzati al di fuori dell'app Podcast principale.

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.

Widget di riproduzione di contenuti multimediali iOS sulla schermata di blocco che mostra la puntata di un podcast con metadati dettagliati.
I contenuti multimediali in riproduzione nell'app possono essere controllati dalla schermata di blocco.

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.

App Podcast per iOS nella schermata delle impostazioni "Notifiche" che mostra l'opzione di attivazione/disattivazione delle notifiche "Nuove puntate".
Le app possono inviare notifiche push per informare l'utente dei nuovi contenuti.

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.

Schermata delle impostazioni di iOS che mostra il pulsante di attivazione/disattivazione "Badge" attivato.
I badge sono un modo discreto con cui le applicazioni possono informare gli utenti dei nuovi contenuti.

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.

Preferenze di macOS nella sezione "Risparmio energetico".
Le app possono mantenere lo schermo attivo.

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.

Se cerchi "podcast" nell'App Store per iOS, viene visualizzata l'app Podcast.
Gli utenti hanno imparato a scoprire le app negli 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.

Selezione delle Risorse utili per farlo sul web
Possono essere eseguiti offline
Contenuti offline disponibili e contenuti multimediali riproducibili
Download proattivo in background
Condivisione con altre applicazioni e interazione con altre applicazioni
Aggiornamento app in background
Stato sincronizzato sul cloud
Controlli dei tasti multimediali hardware
Multitasking e scorciatoia app
Azioni rapide nel menu contestuale
Agisci come app predefinita
Integrazione del file system locale
Aspetto della piattaforma
Barra del titolo personalizzata
Animazioni rapide
Contenuti visualizzati al di fuori dell'app
Widget per il controllo dei contenuti multimediali nella schermata di blocco
Notifiche push
Badge dell'icona dell'app
La riproduzione di contenuti multimediali supera le impostazioni del risparmio energetico
Rilevamento delle app tramite uno store

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