Werk aan meer dan één document tegelijk met tabbladen in uw Progressive Web App
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 gemakkelijker met de computer te communiceren. In overeenstemming met de desktop-metafoor zijn GUI-tabbladen gemodelleerd naar traditionele 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. Voorbeelden 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. Via 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.
Voorgestelde gebruiksscenario's 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
Als u documenten op afzonderlijke browsertabbladen heeft, wordt er gratis bronisolatie geboden, wat tegenwoordig niet mogelijk is via internet. Door ontwikkelaars gebouwde tabbladen kunnen niet op acceptabele wijze 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 momenteel 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 | Toestand |
|---|---|
| 1. Maak een uitleg | Voltooid |
| 2. Maak een eerste ontwerp van specificatie | Niet begonnen |
| 3. Verzamel feedback en herhaal het ontwerp | Bezig |
| 4. Oorsprongsproces | Bezig |
| 5. Lancering | Niet begonnen |
Toepassingsmodus met tabbladen gebruiken
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, worden de "auto" -waarden van de specifieke eigenschappen gebruikt. De browser bepaalt welke waarden voor "auto" moeten worden gebruikt.
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.
De toegestane waarden voor "home_tab" zijn:
-
"auto"om de browser te laten bepalen wat hij moet doen. -
"absent"om de browser te vertellen geen starttabblad weer te geven. - Een object met twee subeigenschappen:
-
"url"met de toegestane waarden"auto"of een URL om het starttabblad op te vergrendelen. -
"icons"met de toegestane waarden"auto"of een reeks pictogrammen zoals in de hoofdeigenschap"icons".
-
Nieuwe tabbladknop
De knop 'Nieuw tabblad', indien aanwezig, zou een nieuw tabblad moeten openen op een URL die binnen het bereik van de app valt. De app kan ervoor kiezen een aangepaste URL en pictogram voor deze knop in te stellen. Browsers kunnen beslissen hoe ze deze tabbladen moeten slepen om nieuwe vensters te maken of te combineren met browsertabbladen.
De toegestane waarden voor "new_tab_button" zijn:
-
"auto"om de browser te laten bepalen wat hij moet doen. -
"absent"om de browser te laten weten dat er geen knop voor een nieuw tabblad moet worden weergegeven. - Een object met twee subeigenschappen:
-
"url"met de toegestane waarden"auto"of een URL binnen het bereik waarop u nieuwe tabbladen kunt openen. -
"icons"met de toegestane waarden"auto"of een reeks pictogrammen zoals in de hoofdeigenschap"icons".
-
Compleet voorbeeld
Een compleet voorbeeld van het configureren van het gedrag van een app met een interface met tabbladen kan er als volgt uitzien:
{
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"url": "./home/",
"icons": [
{
"src": "./home.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
},
"new_tab_button": {
"url": "./new-tab/",
"icons": [
{
"src": "./new-tab.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
}
}
Applicatiemodus met tabbladen detecteren
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 toepassingsmodus met tabbladen proberen door een browservlag in te stellen:
- Stel de vlag
#enable-desktop-pwas-tab-strip. - Installeer de app met tabbladen-application-mode.glitch.me ( broncode ).
- 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 eenvoudige instructies voor het reproduceren opneemt, en voer UI>Browser>WebAppInstalls in het vak Componenten in. Glitch werkt prima voor het delen van snelle en gemakkelijke reproductiecasussen.
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.
Handige 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 artikel is beoordeeld door Joe Medley . Heldenafbeelding door Till Niermann op Wikimedia Commons .
