Questo capitolo si concentra su alcuni aspetti critici del rendering dei contenuti al di fuori della scheda del browser.
La finestra
La finestra di un'applicazione è diversa a seconda del sistema operativo. 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 computer, un'applicazione può avere più di un'istanza aperta alla volta. Condivide lo spazio disponibile sullo schermo con tutte le altre applicazioni aperte. Ogni istanza dell'applicazione può essere ridimensionata e posizionata ovunque sullo schermo, persino sovrapposta ad altre applicazioni.
Icona
Riconosciamo le app dalla loro icona. L'icona viene visualizzata quando cerchi app, nelle impostazioni, dovunque avvii app e dove vedi app in esecuzione.
Queste includono:
- Schermata Home (iOS, iPadOS, Android).
- Avvio applicazioni (macOS, Android).
- Menu Start o Menu App (Windows, ChromeOS, Linux).
- Riquadri Dock, Barra delle app o Multitask (tutti i sistemi operativi).
Durante la creazione dell'icona della tua app web progressiva assicurati che l'icona sia indipendente dalla piattaforma, poiché ciascun sistema operativo può eseguire il rendering delle icone e applicarvi maschere di forma diverse, come quelle nell'immagine seguente.
Applicazione di temi
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 computer e il colore della barra di stato sui dispositivi mobili. Utilizzando 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.
- Background color (Colore sfondo): definisce il colore della finestra prima del caricamento dell'app e dei relativi CSS.
- Colore intenso: definisce il colore dei componenti integrati del browser, ad esempio i controlli del modulo.
Modalità di visualizzazione
Puoi definire il tipo di esperienza di finestra che preferisci per la tua app web progressiva. Puoi scegliere fra tre opzioni:
- Schermo intero
- Autonoma
- Interfaccia utente minima
Esperienza a schermo intero
L'esperienza a schermo intero è adatta per esperienze immersive come giochi, VR 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 Fullscreen dalla tua PWA per visualizzare l'app a schermo intero su richiesta dell'utente.
Esperienza autonoma
La modalità autonoma, l'opzione più comune per un'app web progressiva, mostra la PWA in una finestra standard del sistema operativo senza alcuna UI di navigazione del browser. La finestra potrebbe anche includere un menu controllato dal browser in cui l'utente può:
- Copia l'URL corrente.
- Visualizza, applica o disattiva le estensioni del browser.
- Visualizza e modifica 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 la barra di stato visibile, in modo che l'utente possa comunque vedere le notifiche, l'ora e il livello della batteria. Spesso non include alcun menu controllato dal browser, come potrebbero essere incluse le esperienze desktop autonome.
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 sui sistemi operativi Android e desktop. Quando la usi, il browser che visualizza la tua PWA mostrerà un'interfaccia utente minima per aiutare l'utente a navigare all'interno dell'applicazione.
Su Android, vedrai una barra del titolo che mostra l'elemento <title> corrente e l'origine con un piccolo menu a discesa disponibile. Su computer, nella barra del titolo viene visualizzata una serie di pulsanti che semplificano la navigazione, tra cui un pulsante Indietro e un controllo che consente di passare da una fermata a un'azione di ricaricamento o viceversa, in base allo stato di caricamento corrente.
Ottimizzare il design per i computer
Quando progetti un'app web progressiva per funzionare su un computer, devi pensare alle infinite possibilità per le dimensioni della finestra rispetto all'essere nella scheda del browser o come un'app in un sistema operativo mobile.
Nel Capitolo 3 abbiamo menzionato la mini-modalità: un'app desktop può avere dimensioni di 200 x 100 pixel. Per questa finestra verranno usati i contenuti dell'elemento <title> nel tuo codice HTML come titolo. Questi contenuti vengono visualizzati anche quando premi Alt-Tab per passare da un'app all'altra e in altre posizioni.
Presta attenzione all'elemento <title> del tuo codice HTML e rifletti su come utilizzarlo. <title> non serve solo per la SEO o per il rendering dei primi caratteri della scheda di un browser; che faranno parte dell'esperienza utente
della finestra autonoma del computer.
Best practice per i CSS
Tutta la tua esperienza con layout, design e animazione CSS è valida quando i contenuti vengono visualizzati nella relativa esperienza autonoma. Tuttavia, ci sono un paio di suggerimenti utili per migliorare l'esperienza per una finestra indipendente.
Query supporti
La prima query multimediale che puoi sfruttare nella PWA è la proprietà display-mode che accetta i valori browser, standalone, minimal-ui o fullscreen.
Questa query supporti applica stili diversi a ciascuna modalità. Ad esempio, puoi eseguire il rendering di un invito all'installazione solo in modalità browser oppure eseguire il rendering di un'informazione specifica solo quando l'utente utilizza la tua app dall'icona di sistema. Ciò potrebbe includere 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 usano una PWA installata, si aspettano il comportamento dell'app. Sebbene non sia semplice definire cosa significhi, il comportamento predefinito sul web non offre la migliore esperienza in alcune situazioni.
Selezione dell'utente
In genere i contenuti sono selezionabili con il mouse o con il puntatore oppure con il gesto di tocco e pressione prolungata. Sebbene sia utile per i contenuti, non offre la migliore esperienza possibile per elementi di navigazione, menu e pulsanti all'interno della PWA.
Pertanto, è buona norma disattivare la selezione utente per questi elementi utilizzando user-select: none e la sua versione con prefisso -webkit-:
.unselectable {
user-select: none;
}
Accent color
Nella PWA, puoi definire un colore da abbinare 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 mobile moderni, come Google Chrome e Safari, dispongono di una funzionalità che aggiorna la pagina quando viene visualizzata. Su alcuni browser, come Chrome su Android, questo comportamento viene attivato anche sulle PWA autonome.
Ti consigliamo di disattivare questa azione. Ad esempio, quando fornisci una tua azione di gestione o aggiornamento dei gesti 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 ben aperti. lo schermo potrebbe avere una forma diversa, ad esempio un cerchio, o avere parti che non possono essere utilizzate, come l'incavo di iPhone 13. In questi casi, alcuni browser esporranno le variabili di ambiente con aree sicure in cui possono essere visualizzati 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 usa le variabili di ambiente safe-area-inset-* per estendere i tuoi contenuti in sicurezza in quelle aree.