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 app web progressiva e il suo comportamento quando è installata sul dispositivo mobile o desktop dell'utente. Tramite la proprietà display, puoi personalizzare l'interfaccia utente del browser visualizzata al momento dell'avvio dell'app. Ad esempio, puoi nascondere la barra degli indirizzi e la barra del browser. I giochi possono anche essere avviati a schermo intero. Per riepilogare, di seguito sono riportate le modalità di visualizzazione specificate al momento della stesura di questo articolo.

Proprietà Utilizzo
fullscreen Apre l'applicazione web senza interfaccia utente del browser e occupa interamente l'area di visualizzazione disponibile.
standalone L'app web si apre con l'aspetto di un'app autonoma. L'app viene eseguita in una finestra separata dal browser e nasconde gli elementi dell'interfaccia utente del browser standard, come la barra degli URL.
minimal-ui Questa modalità è simile a standalone, ma fornisce all'utente un insieme minimo di elementi dell'interfaccia utente per controllare la navigazione (ad esempio Indietro e Ricarica).
browser Un'esperienza di 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à, passa alla modalità di visualizzazione successiva della catena.

Mancanza di funzionalità della proprietà display

Il problema di questo approccio di catena di riserva cablata è triplice:

  • Uno sviluppatore non può richiedere "minimal-ui" senza essere costretto a 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 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à di applicazione a schede non hanno un ruolo naturale nella catena di riserva.

La proprietà display_override

Questi problemi vengono risolti dalla proprietà display_override, che il browser prende in considerazione prima della proprietà display. Il suo valore è una sequenza di stringhe considerate in ordine e viene applicata la prima modalità di visualizzazione supportata. Se non sono supportati, il browser ricorre alla valutazione del campo display.

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

  1. "window-controls-overlay" (Innanzitutto, consulta 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à accettabile solo come valore di display_override, ma non di display. I browser che non supportano display_override utilizzano la proprietà display e ignoranodisplay_override come proprietà manifest dell'app web sconosciuta.

Riconoscimenti

La proprietà display_override è stata formalizzata da Daniel Murphy.