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.
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
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.
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.
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.
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.
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) {
}
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;
}
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.