Voorbereiden op de weergavemodi van morgen

PWA's kunnen de property display_override gebruiken voor speciale weergavemodi.

Thomas Steiner

Een web-app-manifest is een json-bestand dat de browser informatie geeft over je progressieve web-app en hoe deze zich moet gedragen als deze is geïnstalleerd op het desktop- of mobiele apparaat van de gebruiker. Via de display property kun je aanpassen welke browser-UI wordt getoond als je app wordt gestart. Je kunt bijvoorbeeld de adresbalk en de browserchroom verbergen. Je kunt zelfs games op volledig scherm starten. Hieronder vind je een kort overzicht van de weergavemodi die zijn opgegeven op het moment dat dit artikel werd geschreven.

Property Gebruik
fullscreen Opent de web-app zonder browser-UI en neemt het hele beschikbare weergavegebied in beslag.
standalone Opent de web-app zodat deze eruitziet en aanvoelt als een losse app. De app wordt uitgevoerd in een eigen venster, los van de browser, en verbergt standaard UI-elementen van de browser, zoals de URL-balk.
minimal-ui Deze modus is vergelijkbaar met standalone, maar biedt de gebruiker een minimale set UI-elementen om de navigatie te beheren (zoals terug en opnieuw laden).
browser Een standaard browserervaring.

Deze weergavemodi volgen een goed gedefinieerde fallback-keten ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Als een browser een bepaalde modus niet ondersteunt, wordt teruggevallen op de volgende weergavemodus in de keten.

Tekortkomingen van de property display

Deze aanpak met een vaste fallback-keten heeft 3 nadelen:

  • Een ontwikkelaar kan "minimal-ui" niet aanvragen zonder te worden teruggezet naar de weergavemodus "browser" als "minimal-ui" niet wordt ondersteund door een bepaalde browser.
  • Ontwikkelaars kunnen geen verschillen tussen browsers verwerken, bijvoorbeeld als de browser wel of geen terugknop in het venster voor de modus "standalone" opneemt.
  • Door het huidige gedrag is het onmogelijk om nieuwe weergavemodi op een compatibiliteit met eerdere versies manier te introduceren, omdat verkenningen zoals de modus voor apps met tabbladen geen natuurlijke plaats hebben in de fallback-keten.

De property display_override

Deze problemen worden opgelost door de display_override property, die de browser vóór de display property in overweging neemt. De waarde is een reeks tekenreeksen die in volgorde worden overwogen en de eerste ondersteunde weergavemodus wordt toegepast. Als er geen wordt ondersteund, valt de browser terug op de evaluatie van het veld display.

In het voorbeeld hieronder is de terugvalketen voor de weergavemodus als volgt. (De details van "window-controls-overlay" vallen buiten het bereik van dit artikel.)

  1. "window-controls-overlay" (Kijk eerst naar display_override.)
  2. "minimal-ui"
  3. "standalone" (Als display_override is uitgeput, evalueer je display.)
  4. "minimal-ui" (Gebruik tot slot de fallback-keten van display.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Om compatibiliteit met eerdere versies te behouden, is elke toekomstige weergavemodus alleen acceptabel als waarde van display_override, maar niet display. Browsers die display_override niet ondersteunen, vallen terug op de property display en negeren display_override als onbekende property van het web-app-manifest.

Erkenning

De display_override property is geformaliseerd door Daniel Murphy.