Deze pagina is vertaald door de Cloud Translation API.

Toepassingsmodus met tabbladen voor PWA's

Werk aan meer dan één document tegelijk met tabbladen in uw Progressive Web App

Thomas Steiner

In de computerwereld is de desktopmetafoor een interfacemetafoor die een reeks verenigende concepten vertegenwoordigt die door grafische gebruikersinterfaces (GUI's) worden gebruikt om gebruikers te helpen intuïtiever met de computer te communiceren. In lijn met de desktopmetafoor zijn GUI-tabbladen gemodelleerd naar klassieke kaarttabbladen die in boeken, papieren dossiers of kaartenbakken worden geplaatst. Een documentinterface met tabbladen (TDI) of tab is een grafisch bedieningselement waarmee meerdere documenten of panelen in één venster kunnen worden geplaatst, waarbij tabbladen worden gebruikt als navigatiewidget om te schakelen tussen sets documenten.

Progressieve webapps kunnen in verschillende weergavemodi worden uitgevoerd, bepaald door de eigenschap display in het manifest van de webapp. De opties zijn fullscreen , standalone , minimal-ui en browser . Deze weergavemodi volgen een duidelijk gedefinieerde fallback-keten ( "fullscreen" → "standalone" → "minimal-ui" → "browser" ). Als een browser een bepaalde modus niet ondersteunt, valt deze terug op de volgende weergavemodus in de keten. Met de eigenschap "display_override" kunnen ontwikkelaars indien nodig hun eigen fallback-keten specificeren.

Wat is de tabbladtoepassingsmodus?

Iets wat tot nu toe ontbrak op het platform, is een manier om PWA-ontwikkelaars hun gebruikers een tabbladinterface te bieden, bijvoorbeeld om verschillende bestanden in hetzelfde PWA-venster te kunnen bewerken. De tabbladtoepassingsmodus vult deze lacune.

Gebruiksscenario's voor tabbladtoepassingsmodus

Voorbeelden van sites die de tabbladtoepassingsmodus kunnen gebruiken, zijn:

Productiviteitsapps waarmee de gebruiker meerdere documenten (of bestanden) tegelijk kan bewerken.
Communicatie-apps waarmee de gebruiker per tabblad gesprekken in verschillende ruimtes kan voeren.
Lees-apps die artikelkoppelingen openen in nieuwe tabbladen in de app.

Verschillen met door ontwikkelaars gemaakte tabbladen

Het hebben van documenten in aparte browsertabbladen brengt resource-isolatie met zich mee, wat via het web vandaag de dag niet mogelijk is. Door ontwikkelaars gemaakte tabbladen zouden niet acceptabel schalen naar honderden tabbladen zoals browsertabbladen dat wel doen. Browserfunctionaliteiten zoals navigatiegeschiedenis, "Kopieer de URL van deze pagina", "Cast dit tabblad" of "Open deze pagina in een webbrowser" zouden worden toegepast op de door ontwikkelaars gemaakte tabbladinterface, maar niet op de geselecteerde documentpagina.

Verschillen met `"display": "browser"`

De huidige "display": "browser" heeft al een specifieke betekenis :

Opent de webtoepassing met behulp van de platformspecifieke conventie voor het openen van hyperlinks in de gebruikersagent (bijvoorbeeld in een browsertabblad of een nieuw venster).

Browsers kunnen weliswaar doen wat ze willen met betrekking tot de gebruikersinterface, maar het zou duidelijk een behoorlijke ondermijning van de verwachtingen van ontwikkelaars zijn als "display": "browser" plotseling zou betekenen "draaien in een apart, toepassingsspecifiek venster zonder browsermogelijkheden, maar met een interface met tabbladen".

Als "display": "browser" instelt, kunt u zich in feite afmelden voor een toepassingsvenster.

Huidige status

Stap	Status
1. Maak een uitleg	Voltooid
2. Maak een eerste ontwerp van de specificatie	Voltooid
3. Verzamel feedback en herhaal het ontwerp	Voltooid
4. Oorsprongsproef	Voltooid
5. Lancering	Voltooid (ChromeOS)

Gebruik de tabbladtoepassingsmodus

Om de tabbladtoepassingsmodus te kunnen gebruiken, moeten ontwikkelaars hun apps aanmelden door een specifieke waarde voor de modus "display_override" in te stellen in het manifest van de webapp.

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

Vervolgens kan de eigenschap "tab_strip" optioneel worden gebruikt om het tabgedrag te verfijnen. Deze heeft twee toegestane subeigenschappen: "home_tab" en "new_tab_button" . Als de eigenschap "tab_strip" niet aanwezig is, wordt standaard het volgende object gebruikt:

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

Tabblad Start

Het tabblad 'Start' is een vastgezet tabblad dat, indien ingeschakeld voor een app, altijd beschikbaar moet zijn wanneer de app geopend is. Dit tabblad mag nooit navigeren. Links die op dit tabblad worden aangeklikt, worden geopend in een nieuw app-tabblad. Apps kunnen ervoor kiezen om de URL waaraan dit tabblad is gekoppeld en het pictogram dat op het tabblad wordt weergegeven, aan te passen.

Het lid "home_tab" van het object "tab_strip" bevat informatie over een speciaal "tabblad Home" dat bedoeld is als hoofdmenu voor de applicatie. Het bevat het volgende lid:

"scope_patterns" : Het lid "scope_patterns" is een lijst met URL-patronen die de reikwijdte van het tabblad Start definiëren ten opzichte van de manifest-URL.

Nieuwe tabbladknop

Het lid "new_tab_button" van het object "tab_strip" beschrijft het gedrag van een UI-affordance (zoals een knop) die, wanneer erop wordt geklikt/geactiveerd, een nieuwe applicatiecontext binnen het applicatievenster opent. Het heeft het volgende lid:

"url" : Het "url" -lid is een tekenreeks die een URL vertegenwoordigt die relatief is ten opzichte van de manifest-URL die zich binnen het bereik van een verwerkt manifest bevindt.

Een applicatie heeft een knop voor een nieuw tabblad als het "url" -lid van de new_tab_button van het verwerkte manifest zich buiten het bereik van het tabblad "Home" bevindt. Als de applicatie geen knop voor een nieuw tabblad heeft, maakt de browser de affordance voor een nieuw tabblad niet beschikbaar voor de gebruiker.

Volledig voorbeeld

Een volledig voorbeeld om het gedrag van een app met een tabbladinterface te configureren, kan er als volgt uitzien:

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

Tabbladtoepassingsmodus detecteren

Apps kunnen detecteren of ze in de tabbladmodus worden uitgevoerd door de CSS-mediafunctie in de display-mode te controleren in CSS of JavaScript:

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

Interactie met de Launch Handler API

Met de Launch Handler API kunnen sites app-starts omleiden naar bestaande app-vensters om te voorkomen dat dubbele vensters worden geopend. Wanneer een app met tabbladen "client_mode": "navigate-new" instelt, wordt bij het starten van een app een nieuw tabblad geopend in een bestaand app-venster.

Demonstratie

U kunt de tabbladtoepassing op ChromeOS proberen:

Installeer de app Tabbed Application Mode ( broncode ).
Klik op de verschillende links op de verschillende tabbladen.

Demo van de tabbladtoepassingsmodus.

Feedback

Het Chrome-team wil graag uw ervaringen met de tabbladtoepassingsmodus horen.

Vertel ons over het API-ontwerp

Werkt de tabbladtoepassingsmodus niet zoals verwacht? Reageer op het probleem met het webappmanifest dat we hebben gecreëerd.

Meld een probleem met de implementatie

Heb je een bug gevonden in de Chrome-implementatie? Meld een bug op new.crbug.com . Zorg ervoor dat je zoveel mogelijk details en instructies voor reproductie opneemt en typ UI>Browser>WebAppInstalls in het vak Componenten .

Toon ondersteuning voor de API

Bent u van plan de tabbladtoepassingsmodus te gebruiken? Uw publieke steun helpt het Chrome-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Stuur een tweet naar @ChromiumDev met de hashtag #TabbedApplicationMode en laat ons weten waar en hoe je deze gebruikt.

Nuttige links

Uitlegger
Probleem met specificatie van web-app-manifest
Chromium-bug
Blink-component: UI>Browser>WebAppInstalls

Dankbetuigingen

De tabbladtoepassingsmodus werd onderzocht door Matt Giuca . De experimentele implementatie in Chrome was het werk van Alan Cutter . Dit document is beoordeeld door Joe Medley . De hoofdafbeelding is van Till Niermann op Wikimedia Commons .