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 indica 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 il chrome del browser. I giochi possono persino essere impostati per l'avvio a schermo intero. Di seguito è riportato un breve riepilogo delle modalità di visualizzazione specificate al momento della stesura 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 che abbia l'aspetto e il funzionamento di un'app autonoma. L'app viene eseguita nella propria finestra, separata dal browser, e nasconde gli elementi standard dell'UI del browser, come la barra degli URL.
minimal-ui Questa modalità è simile a standalone, ma fornisce all' utente un insieme minimo di elementi dell'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à, esegue il fallback alla modalità di visualizzazione successiva nella catena.

Limiti della proprietà display

Il problema di questo approccio alla catena di riserva hardcoded è 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 supportata 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é le esplorazioni come la modalità applicazione a schede non hanno un posto naturale nella catena di riserva.

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 che vengono considerate in ordine e viene applicata la prima modalità di visualizzazione supportata. Se non ne è supportata nessuna, il browser esegue il fallback alla 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, esamina display_override.)
  2. "minimal-ui"
  3. "standalone" (Quando display_override è esaurita, 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 display. I browser che non supportano display_override eseguono il fallback alla proprietà display e ignorano display_override come proprietà del manifest dell'app web sconosciuta.

Riconoscimenti

La proprietà display_override è stata formalizzata da Daniel Murphy.