Prepararsi alle modalità di visualizzazione di domani

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

Thomas Steiner

Un manifest dell'app web è un file JSON che comunica al browser la tua Progressive Web App e il suo comportamento quando viene installata sul computer o sul dispositivo mobile dell'utente. Tramite la proprietà display, puoi personalizzare l'interfaccia utente del browser visualizzata all'avvio dell'app. Ad esempio, puoi nascondere la barra degli indirizzi e la cromatura del browser. I giochi possono anche essere impostati per essere avviati a schermo intero. Per riassumere, di seguito sono riportate le modalità di visualizzazione specificate al momento della stesura di questo articolo.

Proprietà Utilizzare
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 che abbia l'aspetto di un'app autonoma. L'app viene eseguita in una finestra 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 controllare la navigazione (ad esempio Indietro e Ricarica).
browser Un'esperienza di navigazione 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.

Carenze della proprietà display

Il problema con questo approccio a catena di fallback 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 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 un posto naturale nella catena di fallback.

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 nessuno è supportato, il browser torna a valutare il campo display.

Nell'esempio riportato di seguito, la catena di fallback 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, guarda 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 tornano alla proprietà display e ignorano display_override come proprietà sconosciuta del manifest dell'app web.

Riconoscimenti

La proprietà display_override è stata formalizzata da Daniel Murphy.