Toepassingsmodus met tabbladen voor PWA's

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

Thomas Steiner

Opmerking: de applicatiemodus met tabbladen maakt deel uit van het mogelijkhedenproject en is beschikbaar op ChromeOS.

In de computerwereld is de desktop-metafoor een interface-metafoor die bestaat uit een reeks verenigende concepten die worden gebruikt door grafische gebruikersinterfaces (GUI) om gebruikers te helpen intuïtiever met de computer te communiceren. In overeenstemming met de desktop-metafoor zijn GUI-tabbladen gemodelleerd naar klassieke kaarttabbladen die in boeken, papieren dossiers of kaartindexen zijn geplaatst. Een documentinterface met tabbladen (TDI) of tabblad is een grafisch besturingselement waarmee meerdere documenten of panelen in één venster kunnen worden opgenomen, waarbij tabbladen worden gebruikt als navigatiewidget om tussen sets documenten te schakelen.

Progressive Web Apps kunnen in verschillende weergavemodi worden uitgevoerd, afhankelijk van de display eigenschap in het web-app-manifest. De opties zijn fullscreen , standalone , minimal-ui en browser . 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. Met behulp van de eigenschap "display_override" kunnen ontwikkelaars hun eigen fallback-keten specificeren als dat nodig is.

Wat is de toepassingsmodus met tabbladen

Iets dat tot nu toe op het platform ontbrak, is een manier om PWA-ontwikkelaars hun gebruikers een documentinterface met tabbladen te laten aanbieden, zodat ze bijvoorbeeld verschillende bestanden in hetzelfde PWA-venster kunnen bewerken. De toepassingsmodus met tabbladen dicht deze kloof.

Opmerking: deze functie gaat over een zelfstandig app-venster met meerdere tabbladen, met daarin afzonderlijke documenten binnen het app-bereik. Dit is anders dan display: browser , wat suggereert dat de app in een normaal browsertabblad wordt geopend.

Gebruik cases voor de toepassingsmodus met tabbladen

Voorbeelden van sites die de toepassingsmodus met tabbladen kunnen gebruiken, zijn onder meer:

• Productiviteitsapps waarmee de gebruiker meer dan één document (of bestand) tegelijkertijd kan bewerken.
• Communicatie-apps waarmee de gebruiker per tabblad gesprekken kan voeren in verschillende kamers.
• Apps lezen die artikellinks openen op nieuwe in-app-tabbladen.

Verschillen met door ontwikkelaars gebouwde tabbladen

Het hebben van documenten op afzonderlijke browsertabbladen gaat gepaard met bronisolatie, wat tegenwoordig niet mogelijk is via internet. Door ontwikkelaars gebouwde tabbladen zouden niet op acceptabele wijze kunnen worden geschaald naar honderden tabbladen, zoals browsertabbladen dat doen. Browsermogelijkheden zoals navigatiegeschiedenis, "Kopieer deze pagina-URL", "Cast dit tabblad" of "Open deze pagina in een webbrowser" worden toegepast op de door de ontwikkelaar gebouwde interfacepagina met tabbladen, maar niet op de geselecteerde documentpagina.

Verschillen met "display": "browser"

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

Opent de webapplicatie met behulp van de platformspecifieke conventie voor het openen van hyperlinks in de user-agent (bijvoorbeeld in een browsertabblad of een nieuw venster).

Hoewel browsers kunnen doen wat ze willen met betrekking tot de gebruikersinterface, zou het duidelijk een behoorlijk grote ondermijning van de verwachtingen van ontwikkelaars zijn als "display": "browser" plotseling zou betekenen "draaien in een apart applicatiespecifiek venster zonder browsermogelijkheden, maar met een documentinterface met tabbladen ".

Het instellen van "display": "browser" is feitelijk de manier waarop u ervoor kiest om niet in een toepassingsvenster te worden geplaatst.

Huidige status

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

Gebruik de toepassingsmodus met tabbladen

Om de applicatiemodus met tabbladen te gebruiken, moeten ontwikkelaars hun apps aanmelden door een specifieke "display_override" moduswaarde in te stellen in het webapp-manifest.

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

Vervolgens kan de eigenschap "tab_strip" optioneel worden gebruikt om het tabbladgedrag te verfijnen. Het 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 aanwezig moet zijn wanneer de app geopend is. Dit tabblad mag nooit navigeren. Links waarop op dit tabblad wordt geklikt, zouden in een nieuw app-tabblad moeten worden geopend. Apps kunnen ervoor kiezen om de URL aan te passen waarop dit tabblad is vergrendeld en het pictogram dat op het tabblad wordt weergegeven.

Het lid "home_tab" van het object "tab_strip" bevat informatie over een speciaal "home-tabblad" dat bedoeld is om te dienen als menu op het hoogste niveau voor de toepassing. Het bevat het volgende lid:

• "scope_patterns" : het lid "scope_patterns" is een lijst met URL-patronen die het bereik van het starttabblad 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 opent binnen het applicatievenster. Het heeft het volgende lid:

• "url" : Het lid "url" is een tekenreeks die een URL vertegenwoordigt die relatief is aan de manifest-URL die binnen het bereik van een verwerkt manifest valt.

Een toepassing heeft een knop 'Nieuw tabblad "url" lid van het verwerkte manifest buiten het bereik van het tabblad Home valt. Als de applicatie geen knop voor een nieuw tabblad heeft, stelt de browser de optie 'nieuw tabblad' niet beschikbaar voor de gebruiker.

Compleet voorbeeld

Een compleet voorbeeld van het configureren van het gedrag van een app met een interface met tabbladen 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"
    }
  }
}

Detecteer de toepassingsmodus met tabbladen

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

@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-lanceringen 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 de app een nieuw tabblad geopend in een bestaand app-venster.

Demo

U kunt de toepassing met tabbladen proberen op ChromeOS:

1. Installeer de app met tabbladen-application-mode.glitch.me ( broncode ).
2. Klik op de verschillende links op de verschillende tabbladen.

Feedback

Het Chrome-team wil graag horen wat uw ervaringen zijn met de toepassingsmodus met tabbladen.

Vertel ons over het API-ontwerp

Is er iets aan de toepassingsmodus met tabbladen dat niet werkt zoals u had verwacht? Reageer op het webapp-manifestprobleem dat we hebben gemaakt.

Meld een probleem met de implementatie

Heeft u een bug gevonden in de implementatie van Chrome? Dien een bug in op new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en instructies voor het reproduceren opneemt en voer UI>Browser>WebAppInstalls in het vak Componenten in. Glitch werkt uitstekend voor het delen van snelle reproductiegevallen.

Toon ondersteuning voor de API

Bent u van plan de toepassingsmodus met tabbladen te gebruiken? Uw publieke steun helpt het Chrome-team prioriteiten te stellen voor 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 manifestspecificatie van web-app
• Chroom-bug
• Knippercomponent: UI>Browser>WebAppInstalls

Dankbetuigingen

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