Prepararsi alle modalità di visualizzazione di domani

Le PWA possono utilizzare la proprietà "display_override" per gestire modalità di visualizzazione speciali.

Thomas Steiner

Un manifest dell'app web è un file JSON che indica al browser la tua applicazione web progressiva e il suo comportamento quando è installata sul computer o sul dispositivo mobile dell'utente. Tramite la proprietà display puoi personalizzare l'interfaccia utente del browser che viene mostrata all'avvio dell'app. Ad esempio, puoi nascondere la barra degli indirizzi e Chrome del browser. È possibile persino avviare i giochi a schermo intero. Per riassumere brevemente, di seguito sono riportate le modalità di visualizzazione specificate al momento della redazione di questo articolo.

Proprietà Utilizzo
fullscreen Apre l'applicazione web senza alcuna UI del browser e occupa l'intera area di visualizzazione disponibile.
standalone Apre l'app web in modo da sembrare un'app autonoma. L'app viene eseguita in una finestra separata, separata dal browser, e nasconde gli elementi standard dell'interfaccia utente del browser, come la barra degli URL.
minimal-ui Questa modalità è simile a standalone, ma fornisce all'utente un insieme minimo di elementi UI per il controllo della navigazione, ad esempio Indietro e ricarica.
browser Un'esperienza con il browser standard.

Queste modalità di visualizzazione seguono una catena di riserva ben definita ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Se un browser non supporta una determinata modalità, torna alla modalità di visualizzazione successiva nella catena.

Carenze della proprietà display

Il problema con questo approccio a catena di riserva cablata è tre volte:

  • Uno sviluppatore non può richiedere "minimal-ui" senza dover tornare alla modalità di visualizzazione "browser" nel caso in cui "minimal-ui" non sia supportato da un determinato browser.
  • Gli sviluppatori non hanno modo di gestire le differenze tra i browser, ad esempio se il browser include o esclude un pulsante Indietro nella finestra per la modalità "standalone".
  • Il comportamento attuale rende impossibile introdurre nuove modalità di visualizzazione in modo compatibile con le versioni precedenti, poiché esplorazioni come la modalità applicazione a schede non hanno una posizione naturale nella catena di fallback.

La proprietà display_override

Questi problemi vengono risolti dalla proprietà display_override, che il browser considera prima della proprietà display. Il suo valore è una sequenza di stringhe considerate in ordine e viene applicata la prima modalità di visualizzazione supportata. Se nessuna è supportata, il browser effettua una valutazione del campo display.

Nell'esempio riportato di seguito, la catena di riserva della modalità di visualizzazione sarebbe la seguente. I dettagli di "window-controls-overlay" non rientrano nell'ambito di questo articolo.

  1. "window-controls-overlay" (Per prima cosa, dai un'occhiata a display_override.)
  2. "minimal-ui"
  3. "standalone" (quando display_override è esaurito, valuta display.)
  4. "minimal-ui" (Infine, utilizza la catena di riserva display).
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Per mantenere la compatibilità con le versioni precedenti, qualsiasi modalità di visualizzazione futura sarà accettata solo come valore di display_override, ma non di display. I browser che non supportano display_override ricorrono alla proprietà display e ignorano display_override come proprietà del manifest di app web sconosciuta.

Attestazioni

La proprietà display_override è stata formalizzata da Daniel Murphy.