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.
"window-controls-overlay"
(Innanzitutto, guardadisplay_override
.)"minimal-ui"
"standalone"
(quandodisplay_override
è esaurito, valutadisplay
.)"minimal-ui"
(Infine, usa la catena di riservadisplay
)."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.
Link utili
- Spiegazione
- Thread intent di spedizione
- Bug di Chromium
- Voce dello stato di Chrome
- Repository di incubazioni manifest
Riconoscimenti
La proprietà display_override
è stata formalizzata da
Daniel Murphy.