Prepararsi alle modalità di visualizzazione di domani

Le PWA possono utilizzare l'opzione "display_override" per gestire modalità di visualizzazione speciali.

Un file manifest dell'app web è un file JSON che indica al browser la L'app web e come dovrebbe comportarsi una volta installata sul computer o sul dispositivo mobile dell'utente. Tramite la proprietà display, puoi personalizzare la UI del browser da mostrare all'avvio dell'app. Ad esempio, puoi nascondere barra degli indirizzi e browser Chrome. Puoi 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à Usa
fullscreen Apre l'applicazione web senza alcuna UI del browser e richiede l'intera area di visualizzazione disponibile.
standalone Apre l'app web in modo che abbia l'aspetto e il design indipendente dell'app. L'app viene eseguita in una propria finestra, separata dal browser, e nasconde gli elementi standard dell'interfaccia utente del browser, come la barra dell'URL.
minimal-ui Questa modalità è simile a standalone, ma fornisce il utente un insieme minimo di elementi UI per controllare la navigazione (come come tornare indietro e ricaricare).
browser Un'esperienza browser standard.

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

Limiti della proprietà display

Il problema di questo approccio cablato alla catena di fallback si presenta tre volte:

  • Uno sviluppatore non può richiedere "minimal-ui" senza essere forzato 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 l'introduzione di nuove soluzioni display in modo compatibile con le versioni precedenti, poiché le esplorazioni come la modalità di applicazione a schede non hanno un naturale nella catena di fallback.

La proprietà display_override

Questi problemi vengono risolti dalla proprietà display_override, che il browser esamina prima la proprietà display. Il suo valore è una sequenza di stringhe considerate in ordine, viene applicata la prima modalità di visualizzazione supportata. Se nessuno è supportato, il browser torna alla valutazione il campo display.

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

  1. "window-controls-overlay" (Innanzitutto, guarda display_override.)
  2. "minimal-ui"
  3. "standalone" (quando display_override è esaurito, valuta display.)
  4. "minimal-ui" (Infine, usa 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 se il valore è display_override, ma non display. I browser che non supportano display_override tornano alla proprietà display e ignorano display_override come proprietà manifest dell'app web sconosciuta.

Riconoscimenti

La proprietà display_override è stata formalizzata da Daniel Murphy.