Progettazione di app

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.

di Gemini Advanced.

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

di Gemini Advanced.

Nota : quando pianifichi l'interfaccia utente dell'app web progressiva, tieni presente che per il tema non è possibile utilizzare immagini o sfumature, ma soltanto colori normali. È preferibile scegliere colori senza trasparenza e utilizzare i colori rgb o hsl, i codici esadecimali o i colori denominati. La creazione di temi per la tua app potrebbe 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 di finestra che preferisci per la tua app web progressiva. Puoi scegliere fra tre opzioni:

• Schermo intero
• Autonoma
• Interfaccia utente minima

di Gemini Advanced.

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

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.

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

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.

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, che però rimanderà a Safari come preferito e non potrà accedere all'app nella scheda del browser.

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.

Nota: se stai sviluppando la tua app utilizzando una libreria lato client, come 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 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.

Ricorda che 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 relativa ai tuoi contenuti, ad esempio le proprietà nel file manifest dell'app web.

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

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 di rispettare le prefers-reduced-motion query supporti per disattivare o ridurre transizioni e animazioni.

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;
}

La selezione degli utenti è una funzionalità vitale di ogni app web in termini di usabilità e accessibilità. Non disattivare la selezione degli utenti per tutti i contenuti, ma solo sugli elementi dell'interfaccia utente. In caso contrario, l'esperienza sarà scadente o imprevista.

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.

Attenzione : quando applichi viewport-fit=cover, ricorda che ora è possibile eseguire il rendering dei 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à display 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