Progettazione di app

Questo capitolo si concentra su alcuni aspetti critici del rendering dei contenuti al di fuori della scheda del browser.

La finestra

I diversi sistemi operativi hanno idee diverse su cosa sia una finestra dell'applicazione. Ad esempio, su iPhone un'applicazione occupa sempre il 100% dello schermo. Su Android e iPad le applicazioni in genere vengono eseguite a schermo intero, ma è possibile condividere lo schermo tra due app, tuttavia è aperta una sola istanza di app alla volta. Al contrario, su un computer, un'applicazione può avere più istanze aperte contemporaneamente. Condivide lo spazio sullo schermo disponibile con tutte le altre applicazioni aperte. Ogni istanza dell'applicazione può essere ridimensionata e posizionata in qualsiasi punto dello schermo, anche sovrapponendo altre applicazioni.

L'icona

Riconosciamo le app dalla loro icona. L'icona viene visualizzata quando cerchi app, nelle impostazioni, ovunque avvii app e dove vedi le app in esecuzione.

Queste includono:

• Schermata Home (iOS, iPadOS, Android).
• Avvio app (macOS, Android).
• Menu Start o Menu app (Windows, ChromeOS, Linux).
• Dock, barra delle app o riquadri multitasking (tutti i sistemi operativi).

Quando crei l'icona per la tua Progressive Web App, assicurati che sia indipendente dalla piattaforma, poiché ogni sistema operativo può eseguire il rendering delle icone e applicare maschere di forme diverse, come quelle nell'immagine di seguito.

Aggiungere un tema all'app

Esistono diversi modi per personalizzare lo stile delle app nelle tue PWA, tra cui:

• Colore tema: definisce il colore della barra delle app su computer e della barra di stato sui dispositivi mobili. Con un meta tag, puoi avere opzioni per diversi schemi, ad esempio la modalità Buio o Luce, che verranno utilizzati in base alle preferenze dell'utente.
• Colore di sfondo: definisce il colore della finestra prima del caricamento dell'app e del relativo CSS.
• Colore di accento: definisce il colore dei componenti del browser integrati, ad esempio i controlli dei moduli.

Una PWA desktop che mostra i colori del tema e dell'accento e una schermata di benvenuto della PWA per Android che mostra i colori del tema e dello sfondo.

Nota: quando pianifichi l'interfaccia utente della tua Progressive Web App, tieni presente che non puoi utilizzare immagini o gradienti per il tema, ma solo colori semplici. È preferibile scegliere colori senza trasparenza e utilizzare i colori rgb o hsl, i codici esadecimali o i colori con nome. L'applicazione di temi all'app può influire anche sui temi del browser anche senza installare l'app, ad esempio quando si utilizza l'elemento <meta name="theme-color">.

Modalità di visualizzazione

Puoi definire il tipo di esperienza nella finestra che vuoi per la tua app web progressiva. Hai a disposizione tre opzioni:

• Schermo intero
• Autonoma
• Interfaccia utente minima

Puoi anche utilizzare l'area della barra del titolo accanto ai controlli della finestra per far sembrare la tua PWA più simile a un'app con la modalità di visualizzazione avanzata chiamata Window Controls Overlay. Consulta Personalizzare l'overlay dei controlli delle finestre della barra del titolo della PWA.

Nota: se una determinata modalità di visualizzazione non è supportata o non può essere utilizzata per visualizzare la tua PWA, verrà utilizzata la modalità di visualizzazione successiva disponibile. La modalità a schermo intero tornerà alla modalità autonoma, la modalità autonoma tornerà all'interfaccia utente minima e l'interfaccia utente minima tornerà al browser, l'impostazione predefinita. Puoi utilizzare il campo display_override per specificare la tua catena di riserva per la modalità di visualizzazione che verrà applicata prima della valutazione dell'elemento display. La modalità di visualizzazione del browser non viene visualizzata come finestra autonoma, ma mostra la PWA in una scheda del browser da cui è stata installata, come un preferito web nella schermata Home.

Esperienza a schermo intero

Un'esperienza a schermo intero è adatta per esperienze immersive, come giochi, realtà virtuale o realtà aumentata. Attualmente è disponibile solo sui dispositivi Android e nasconde la barra di stato e la barra di navigazione, dando alla tua PWA il 100% dello schermo per i tuoi contenuti.

Su computer e iPadOS, le PWA a schermo intero non sono supportate. Tuttavia, puoi utilizzare l'API Fullscreen all'interno della tua PWA per visualizzare l'app a schermo intero su richiesta di un utente.

Esperienza autonoma

L'opzione più comune per un'app web progressiva, la modalità autonoma mostra la PWA in una finestra standard del sistema operativo senza l'interfaccia utente di navigazione del browser. La finestra può includere anche un menu controllato dal browser in cui l'utente può:

• Copia l'URL corrente.
• Visualizzare, applicare o disattivare le estensioni del browser.
• Visualizza e modifica le autorizzazioni.
• Controlla l'origine corrente e il certificato SSL.

La barra del titolo può anche mostrare le autorizzazioni e l'utilizzo dell'hardware, sostituendo la barra omnibox o la barra degli URL quando la PWA viene visualizzata nella scheda.

Le immagini sopra mostrano come una PWA viene visualizzata in modalità autonoma su computer in Microsoft Edge e Chrome.

Sui dispositivi mobili, un'esperienza PWA autonoma crea una schermata standard che mantiene visibile la barra di stato, in modo che l'utente possa comunque vedere le notifiche, l'ora e il livello della batteria. Spesso non ha un menu controllato dal browser, come potrebbe essere incluso nelle esperienze autonome desktop.

Alcuni browser su Android creano una notifica fissa e silenziosa mentre la PWA è in primo piano, che consente all'utente di copiare l'URL corrente o altre opzioni.

Interfaccia utente minima

Questa modalità è disponibile per le app web progressive su sistemi operativi Android e desktop. Quando la utilizzi, il browser che esegue il rendering della tua PWA mostrerà un'interfaccia utente minima per aiutare l'utente a navigare all'interno dell'applicazione.

Su Android viene visualizzata una barra del titolo che mostra l'elemento <title> corrente e l'origine con un piccolo menu a discesa. Sul computer, nella barra del titolo viene visualizzata una serie di pulsanti che ti aiutano a navigare, tra cui un pulsante Indietro e un controllo che consente di passare da un'azione di interruzione a una di ricarica, in base allo stato di caricamento corrente.

Avviso: Safari su iOS e iPadOS non supporta la modalità UI minima per le PWA. Viene invece utilizzata una scorciatoia del browser come opzione di riserva. L'utente può aggiungere un'icona alla schermata Home, ma questa icona rimanderà a Safari come preferito e non avrà un'esperienza con l'app al di fuori della scheda del browser.

Ottimizzazione del design per il computer

Quando progetti un'applicazione web progressiva per il funzionamento su un computer, devi pensare alle infinite possibilità di dimensioni della finestra rispetto a quando si trova nella scheda del browser o come app in un sistema operativo mobile.

Nel capitolo 3 abbiamo parlato della modalità mini: un'app desktop può essere piccola come 200 x 100 pixel. Questa finestra utilizzerà i contenuti dell'elemento <title> nel codice HTML come titolo della finestra. Questi contenuti vengono visualizzati anche quando premi Alt-Tab per passare da un'app all'altra e in altri punti.

Presta attenzione all'elemento <title> del tuo codice HTML e ripensa al modo in cui lo utilizzi. <title> non è solo per la SEO o per visualizzare solo i primi caratteri nella scheda di un browser, ma farà parte dell'esperienza utente della finestra del desktop autonoma.

Nota: se stai sviluppando la tua app utilizzando una libreria lato client, come React o Vue, non dimenticare di modificare il valore <title> in un valore pratico quando passi da una sezione all'altra o da un percorso all'altro della tua app. È tempo di ripensare a <title>.

Best practice CSS

Tutta la tua esperienza con layout, design e animazione CSS è valida quando i contenuti vengono visualizzati nella loro esperienza autonoma. Tuttavia, ci sono alcuni suggerimenti per migliorare l'esperienza in una finestra autonoma.

Ricorda che il CSS definisce solo gli stili per i contenuti della PWA. Più avanti in questo corso vedremo come specificare le dichiarazioni di stile per la finestra attorno ai contenuti, ad esempio le proprietà nel manifest della web app.

Query supporti

La prima query sui media che puoi utilizzare nella tua PWA è la proprietà display-mode che accetta i valori browser, standalone, minimal-ui o fullscreen.

Questa query sui media applica stili diversi a ogni modalità. Ad esempio, puoi visualizzare un invito all'installazione solo in modalità browser o una determinata informazione solo quando l'utente utilizza la tua app dall'icona di sistema. Ad esempio, potresti aggiungere un pulsante Indietro da utilizzare quando l'app viene avviata in modalità autonoma.

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

Nota: gli utenti si aspettano che le app si integrino con la piattaforma, quindi valuta la possibilità di offrire modalità chiare e scure utilizzando prefers-colors-scheme e rispettando le query sui media prefers-reduced-motion per disattivare o ridurre le transizioni e le animazioni.

L'esperienza con l'app

Quando gli utenti utilizzano una PWA installata, si aspettano il comportamento di un'app. Sebbene non sia semplice definire cosa significhi, il comportamento web predefinito non offre la migliore esperienza in alcune situazioni.

Selezione dell'utente

In genere, i contenuti sono selezionabili con un mouse o un cursore oppure con un gesto di tocco prolungato. Sebbene sia utile per i contenuti, non offre l'esperienza migliore per elementi di navigazione, menu e pulsanti all'interno della tua PWA.

Pertanto, ti consigliamo di disattivare la selezione dell'utente su questi elementi utilizzando user-select: none e la relativa versione con prefisso -webkit-:

.unselectable {
   user-select: none;
}

La selezione dell'utente è una funzionalità fondamentale di ogni app web per l'usabilità e l'accessibilità. Non disattivare la selezione dell'utente su tutti i contenuti, ma solo sugli elementi dell'interfaccia utente se ciò crea un'esperienza scadente o inaspettata.

Accent color

Nella tua PWA, puoi definire un colore in linea con il tuo brand nei controlli dei moduli HTML utilizzando la proprietà accent-color.

Caratteri di sistema

Se vuoi che un elemento, ad esempio finestre di dialogo o messaggi, corrisponda al carattere predefinito della piattaforma dell'utente, puoi utilizzare la seguente famiglia di caratteri:

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

Trascina per aggiornare

I browser mobile moderni, come Google Chrome e Safari, dispongono di una funzionalità che aggiorna la pagina quando viene tirata verso il basso. Su alcuni browser, come Chrome su Android, questo comportamento è attivato anche sulle PWA autonome.

Ti consigliamo di disattivare questa azione. Ad esempio, quando fornisci la tua azione di gestione dei gesti o di aggiornamento oppure se esiste la possibilità che l'utente attivi l'azione involontariamente.

È possibile disattivare questo comportamento utilizzando overscroll-behavior-y: contain:.

  body {
    overscroll-behavior-y: contain;
  }

Aree sicure

Alcuni dispositivi non hanno schermi rettangolari privi di ostruzioni; invece, lo schermo potrebbe avere una forma diversa, ad esempio un cerchio, o avere parti non utilizzabili, come il notch di iPhone 13. In questi casi, alcuni browser mostrano variabili di ambiente con aree sicure che possono mostrare contenuti.

Se vuoi l'accesso completo allo schermo, anche all'area invisibile, per visualizzare il colore o l'immagine, includi viewport-fit=cover nei contenuti del tag <meta name="viewport">. Quindi, utilizza le variabili di ambiente safe-area-inset-* per estendere in sicurezza i tuoi contenuti a queste aree.

Attenzione: quando applichi viewport-fit=cover, ricorda che ora puoi visualizzare i pixel dietro i bordi arrotondati e i notch, quindi devi sempre utilizzare margini o spaziatura sicuri per i contenuti critici e gli elementi interattivi.

Risorse

• Query sui contenuti multimediali per la modalità di visualizzazione CSS
• Controllare lo scorrimento: personalizzare gli effetti di scorrimento e aggiornamento con il trascinamento
• prefers-color-scheme: Ciao oscurità, mio vecchio amico
• prefers-reduced-motion: a volte meno movimento è meglio
• Funzione CSS env()
• Colore di accento CSS
• Overlay controlli finestra