Voorbereiden op de weergavemodi van morgen

PWA's kunnen de eigenschap "display_override" gebruiken om met speciale weergavemodi om te gaan.

Thomas Steiner

Een webapp-manifest is een JSON-bestand dat de browser informeert over uw Progressive Web App en hoe deze zich moet gedragen wanneer deze op de desktop of het mobiele apparaat van de gebruiker wordt geïnstalleerd. Via de display eigenschap kunt u aanpassen welke browser-UI wordt weergegeven wanneer uw app wordt gestart. U kunt bijvoorbeeld de adresbalk en browserchroom verbergen. Het is zelfs mogelijk om games op volledig scherm te starten. Als korte samenvatting vindt u hieronder de weergavemodi die zijn opgegeven op het moment dat dit artikel werd geschreven.

Eigendom Gebruik
fullscreen Opent de webapplicatie zonder browserinterface en neemt het volledige beschikbare weergavegebied in beslag.
standalone Opent de web-app zodat deze eruitziet en aanvoelt als een zelfstandige app. De app draait in een eigen venster, los van de browser, en verbergt standaard browser-UI-elementen zoals de URL-balk.
minimal-ui Deze modus is vergelijkbaar met standalone , maar biedt de gebruiker een minimale set gebruikersinterface-elementen voor het besturen van de navigatie (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, valt hij terug naar de volgende weergavemodus in de keten.

Tekortkomingen van de display eigenschap

Het probleem met deze vaste fallback-ketenbenadering is drieledig:

  • Een ontwikkelaar kan "minimal-ui" niet aanvragen zonder terug te worden gedwongen naar de weergavemodus "browser" in het geval dat "minimal-ui" niet wordt ondersteund door een bepaalde browser.
  • Ontwikkelaars kunnen op geen enkele manier omgaan met verschillen tussen browsers, bijvoorbeeld als de browser een terugknop in het venster bevat of uitsluit voor "standalone" modus.
  • Het huidige gedrag maakt het onmogelijk om nieuwe weergavemodi op een achterwaarts compatibele manier te introduceren, omdat verkenningen zoals de toepassingsmodus met tabbladen geen natuurlijke plaats in de fallback-keten hebben.

De eigenschap display_override

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

In het onderstaande voorbeeld zou de terugvalketen voor de weergavemodus er als volgt uitzien. (De details van "window-controls-overlay" vallen buiten het bestek van dit artikel.)

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

Om achterwaarts compatibel te blijven, zal elke toekomstige weergavemodus alleen acceptabel zijn als een waarde van display_override , maar niet display . Browsers die display_override niet ondersteunen, vallen terug op de eigenschap display en negeren display_override als een onbekende manifesteigenschap van de web-app.

Dankbetuigingen

De eigenschap display_override is geformaliseerd door Daniel Murphy .