Le PWA possono utilizzare la proprietà "display_override" per gestire modalità di visualizzazione speciali.
Un manifest dell'app web è un file JSON che indica al browser la tua applicazione web progressiva e il suo comportamento quando è installata sul computer o sul dispositivo mobile dell'utente.
Tramite la proprietà display
puoi personalizzare l'interfaccia utente del browser che viene mostrata all'avvio dell'app. Ad esempio, puoi nascondere la
barra degli indirizzi e Chrome del browser. È possibile 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à | 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 da sembrare un'app autonoma. L'app viene eseguita in una finestra separata, 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 il controllo della navigazione, ad esempio Indietro e ricarica.
|
browser |
Un'esperienza con il 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à, torna alla modalità di visualizzazione successiva nella catena.
Carenze della proprietà display
Il problema con questo approccio a catena di riserva cablata è tre volte:
- Uno sviluppatore non può richiedere
"minimal-ui"
senza dover 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 una posizione naturale nella catena di fallback.
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 considerate in ordine e viene applicata la prima modalità di visualizzazione supportata. Se nessuna è supportata, il browser effettua una 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.
"window-controls-overlay"
(Per prima cosa, dai un'occhiata adisplay_override
.)"minimal-ui"
"standalone"
(quandodisplay_override
è esaurito, valutadisplay
.)"minimal-ui"
(Infine, utilizza 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à accettata solo come valore di
display_override
, ma non di display
.
I browser che non supportano display_override
ricorrono alla proprietà display
e ignorano
display_override
come proprietà del manifest di app web sconosciuta.
Link utili
- Spiegazione
- Thread intenzione di spedizione
- Bug di Chromium
- Voce Stato di Chrome
- Repository di incubazioni manifest
Attestazioni
La proprietà display_override
è stata formalizzata da
Daniel Murphy.