Progettazione di app

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

La finestra

Ogni sistema operativo ha un'idea diversa della finestra di un'applicazione. Ad esempio, sugli 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 c'è una sola istanza di app aperta alla volta. Al contrario, su un dispositivo desktop, un'applicazione può avere più istanze aperte alla volta. Condivide lo spazio disponibile sullo schermo con tutte le altre applicazioni aperte. Ogni istanza dell'applicazione può essere ridimensionata e posizionata in qualsiasi punto dello schermo, anche sovrapponendosi ad altre applicazioni.

Icona

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

ad esempio:

• Schermata Home (iOS, iPadOS, Android).
• Avvio applicazioni (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 della tua app web progressiva, assicurati che la sua icona sia indipendente dalla piattaforma, poiché ogni sistema operativo può eseguire il rendering delle icone e applicarvi maschere di forma diverse, come quelle nell'immagine di seguito.

Temi dell'app

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

• Colore tema: definisce il colore della barra del titolo della finestra sul desktop e il colore della barra di stato sui dispositivi mobili. Utilizzando un meta tag, puoi avere opzioni per diversi schemi, come la modalità Buio o Luce, che verranno utilizzati in base alle preferenze dell'utente.
• Colore sfondo: definisce il colore della finestra prima che l'app e i relativi CSS vengano caricati.
• Colore intenso: definisce il colore dei componenti integrati del browser, come i controlli del modulo.

Una PWA desktop che mostra colori di tema e contrasto e una schermata iniziale di PWA Android che mostra i colori del tema e dello sfondo.

Nota: quando pianifichi l'interfaccia utente della tua app web progressiva, fai attenzione a non utilizzare immagini o gradienti per il tema, ma solo colori in tinta unita. È preferibile scegliere colori senza trasparenza e utilizzare i colori rgb o hsl, i codici esadecimali o i colori denominati. La tematizzazione della tua app potrebbe anche influire sui temi del browser anche senza installarla, ad esempio quando utilizzi l'elemento <meta name="theme-color">.

Modalità di visualizzazione

Puoi definire il tipo di esperienza delle finestre che preferisci per la tua app web progressiva. Hai a disposizione tre opzioni:

• Schermo intero
• Autonoma
• Interfaccia utente minima

Nota : se una determinata modalità di visualizzazione non è supportata o non può essere utilizzata per visualizzare la PWA, verrà ripristinata la successiva modalità di visualizzazione disponibile. La modalità a schermo intero ricorrerà alla modalità autonoma, la modalità autonoma ricorrerà all'interfaccia utente minima e l'interfaccia utente minima utilizzerà il browser (predefinito). La modalità di visualizzazione del browser non viene mostrata come una finestra separata, ma mostra la PWA in una scheda del browser da cui è stata installata, ad esempio un preferito web in una schermata Home.

Esperienza a schermo intero

Un'esperienza a schermo intero è adatta per esperienze immersive, come giochi, esperienze di realtà virtuale o AR. Al momento è disponibile solo sui dispositivi Android e nasconde la barra di stato e la barra di navigazione, offrendo alla 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 a schermo intero dalla PWA per visualizzare la tua 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 alcuna UI di navigazione del browser. La finestra potrebbe includere anche un menu controllato dal browser in cui l'utente può:

• Copia l'URL corrente.
• Visualizza, applica o disattiva le estensioni del browser.
• Visualizzare e modificare le autorizzazioni.
• Controlla l'origine attuale e il certificato SSL.

La barra del titolo potrebbe anche mostrare le autorizzazioni e l'utilizzo dell'hardware in sostituzione della omnibox o della barra degli URL quando la PWA viene visualizzata nella scheda.

Le immagini riportate sopra mostrano come viene visualizzata una PWA in modalità autonoma sul desktop in Microsoft Edge e Chrome.

Sui dispositivi mobili, un'esperienza PWA autonoma creerà 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 dispone di un menu controllato dal browser, come potrebbero essere incluse le 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 lo utilizzi, il browser che esegue il rendering della PWA mostrerà un'interfaccia utente minima per aiutare l'utente a navigare all'interno dell'applicazione.

Su Android, visualizzerai una barra del titolo che mostra l'elemento <title> corrente e l'origine con un piccolo menu a discesa disponibile. Sui computer, nella barra del titolo sarà disponibile una serie di pulsanti che facilitano la navigazione, inclusi un pulsante Indietro e un controllo che consente di passare da un'azione di interruzione all'altra a un'azione di ricaricamento, in base allo stato di caricamento attuale.

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

Ottimizzazione del design per computer

Quando progetti un'app web progressiva perché funzioni su un computer desktop, devi considerare le infinite possibilità di dimensioni delle finestre rispetto a quelle che possono essere visualizzate nella scheda del browser o come app in un sistema operativo mobile.

Nel Capitolo 3 abbiamo parlato della modalità mini: un'app desktop può avere dimensioni minime di 200 x 100 pixel. Questa finestra utilizzerà i contenuti dell'elemento <title> nel codice HTML come titolo della finestra. e che viene visualizzato anche quando Alt-Tab tra le app e in altre posizioni.

Presta attenzione all'elemento <title> del tuo codice HTML e ripensa a come utilizzarlo. Il <title> non serve solo per la SEO o per visualizzare solo i primi caratteri nella scheda del browser, ma farà parte dell'esperienza utente della tua finestra desktop autonoma.

Nota: se stai sviluppando l'app utilizzando una libreria lato client, ad esempio React o Vue, non dimenticare di modificare <title> in un valore pratico quando ti sposti tra sezioni o percorsi dell'app. È il momento di reinventare <title>.

Best practice per i CSS

Tutta l'esperienza con layout, design e animazione CSS è valida quando viene eseguito il rendering dei contenuti nella relativa esperienza autonoma. Tuttavia, sono disponibili un paio di suggerimenti utili per migliorare l'esperienza in una finestra a sé stante.

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

Query supporti

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

Questa query supporti applica stili diversi a ogni modalità. Ad esempio, puoi visualizzare un invito di installazione solo quando è attiva la modalità del browser oppure un'informazione specifica soltanto quando l'utente utilizza la tua app dall'icona di sistema. Potrebbe essere inclusa l'aggiunta di 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 le modalità Buio e Luce utilizzando prefers-colors-scheme e rispettando le query supporti prefers-reduced-motion per disattivare o ridurre transizioni e animazioni.

L'esperienza con l'app

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

Selezione utente

In genere è possibile selezionare i contenuti con il mouse o il puntatore oppure con il gesto di tocco e pressione. Sebbene sia utile per i contenuti, non offre la migliore esperienza per le voci di navigazione, i menu e i pulsanti della PWA.

Pertanto, è consigliabile disattivare la selezione degli utenti per questi elementi utilizzando user-select: none e la versione con prefisso -webkit-:

.unselectable {
   user-select: none;
}

La selezione degli utenti è una funzionalità fondamentale di ogni app web per quanto riguarda l'usabilità e l'accessibilità. Non disattivare la selezione degli utenti per tutti i contenuti: solo negli elementi UI, se non farlo, crei un'esperienza negativa o imprevista.

Accent color

Nella PWA, puoi definire un colore che corrisponda al tuo brand nei controlli del modulo HTML utilizzando la proprietà accent-color.

Caratteri di sistema

Se vuoi che un elemento, come 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 per dispositivi mobili moderni, come Google Chrome e Safari, dispongono di una funzionalità che aggiorna la pagina quando viene aperta. In alcuni browser, come Chrome su Android, questo comportamento viene attivato anche nelle PWA indipendenti.

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

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

  body {
    overscroll-behavior-y: contain;
  }

Aree sicure

Alcuni dispositivi non hanno schermi rettangolari non coperti, ma lo schermo potrebbe avere una forma diversa, come un cerchio, o avere parti dello schermo che non possono essere utilizzate, come la tacca di iPhone 13. In questi casi, alcuni browser espongono le variabili di ambiente con aree sicure in grado di visualizzare 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">. Dopodiché usa le variabili di ambiente safe-area-inset-* per estendere i tuoi contenuti in sicurezza a quelle aree.

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

Risorse

• Query multimediale in modalità di visualizzazione CSS
• Assumi il controllo dello scorrimento: personalizzando gli effetti pull-to-refresh e overflow
• prefers-color-scheme: Ciao oscurità, mio vecchio amico
• prefers-reduced-motion: a volte meno movimento è più
• Funzione CSS env()
• Colore intenso CSS