Travaillez sur plusieurs documents à la fois grâce aux onglets de votre progressive web app
Dans le monde de l'informatique, la métaphore du bureau est une métaphore d'interface qui désigne un ensemble de concepts unifiés utilisés par les interfaces utilisateur graphiques (IUG) pour aider les utilisateurs à interagir plus facilement avec l'ordinateur. Conformément à la métaphore du bureau, les onglets de l'IUG sont modélisés d'après les onglets de cartes traditionnels insérés dans des livres, des dossiers papier ou des index de cartes. Une interface de document à onglets (TDI) est un élément de commande graphique qui permet de contenir plusieurs documents ou panneaux dans une seule fenêtre, en utilisant des onglets comme widget de navigation pour passer d'un ensemble de documents à un autre.
Les Progressive Web Apps peuvent s'exécuter dans différents modes d'affichage déterminés par la propriété display dans le fichier manifeste de l'application Web. Exemples : fullscreen, standalone, minimal-ui et browser. Ces modes d'affichage suivent une chaîne de remplacement bien définie ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Si un navigateur n'est pas compatible avec un mode donné, il revient au mode d'affichage suivant dans la chaîne. Via la propriété "display_override", les développeurs peuvent spécifier leur propre chaîne de remplacement si nécessaire.
Qu'est-ce que le mode application à onglets ?
Jusqu'à présent, la plate-forme ne permettait pas aux développeurs de PWA d'offrir à leurs utilisateurs une interface de document à onglets, par exemple pour permettre de modifier différents fichiers dans la même fenêtre de PWA. Le mode application avec onglets comble cette lacune.
Cas d'utilisation suggérés pour le mode application à onglets
Voici quelques exemples de sites pouvant utiliser le mode application à onglets:
- Applications de productivité permettant à l'utilisateur de modifier plusieurs documents (ou fichiers) à la fois
- Applications de communication qui permettent à l'utilisateur de discuter dans différents salons par onglet.
- Lecture d'applications qui ouvrent les liens vers des articles dans de nouveaux onglets de l'application.
Différences avec les onglets créés par le développeur
L'isolation des ressources est sans frais lorsque les documents sont dans des onglets de navigateur distincts, ce qui n'est pas possible avec le Web aujourd'hui. Les onglets créés par le développeur ne peuvent pas être mis à l'échelle de manière acceptable pour des centaines d'onglets, comme le font les onglets du navigateur. Les affordances du navigateur telles que l'historique de navigation, "Copier l'URL de cette page", "Caster cet onglet" ou "Ouvrir cette page dans un navigateur Web" seraient appliquées à la page de l'interface à onglets créée par le développeur, mais pas à la page de document actuellement sélectionnée.
Différences avec "display": "browser"
"display": "browser" actuel a déjà une signification spécifique:
Ouvre l'application Web selon la convention spécifique à la plate-forme pour ouvrir les liens hypertextes dans le user-agent (par exemple, dans un onglet de navigateur ou une nouvelle fenêtre).
Bien que les navigateurs puissent faire ce qu'ils veulent concernant l'interface utilisateur, ce serait clairement une subversion assez importante des attentes des développeurs si "display": "browser" signifiait soudainement "s'exécuter dans une fenêtre distincte spécifique à l'application sans affordances de navigateur, mais avec une interface de document à onglets".
Définir "display": "browser" est en fait le moyen de désactiver l'affichage dans une fenêtre d'application.
État actuel
| Étape | État |
|---|---|
| 1. Créer un message d'explication | Terminée |
| 2. Créer une première ébauche de la spécification | Non démarrée |
| 3. Recueillir des commentaires et itérer sur la conception | En cours |
| 4. Essai Origin | En cours |
| 5. Lancer | Non démarrée |
Utiliser le mode d'application à onglets
Pour utiliser le mode d'application à onglets, les développeurs doivent activer leurs applications en définissant une valeur de mode "display_override" spécifique dans le fichier manifeste de l'application Web.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Ensuite, vous pouvez éventuellement utiliser la propriété "tab_strip" pour ajuster le comportement des onglets. Il comporte deux sous-propriétés autorisées, "home_tab" et "new_tab_button". Si la propriété "tab_strip" n'est pas présente, les valeurs "auto" des propriétés particulières sont utilisées. Le navigateur détermine les valeurs à utiliser pour "auto".
Onglet "Accueil"
L'onglet "Accueil" est un onglet épinglé qui, s'il est activé pour une application, doit toujours être présent lorsque l'application est ouverte. Cet onglet ne doit jamais naviguer. Les liens sur lesquels vous cliquez dans cet onglet doivent s'ouvrir dans un nouvel onglet de l'application. Les applications peuvent choisir de personnaliser l'URL sur laquelle cet onglet est verrouillé et l'icône qui s'y affiche.
Les valeurs autorisées pour "home_tab" sont les suivantes:
"auto"pour laisser le navigateur déterminer quoi faire."absent"pour indiquer au navigateur de ne pas afficher d'onglet d'accueil.- Un objet avec deux sous-propriétés :
"url"par les valeurs autorisées de"auto"ou une URL sur laquelle verrouiller l'onglet d'accueil."icons"avec les valeurs autorisées de"auto"ou un tableau d'icônes comme dans la propriété principale"icons".
Bouton "Nouvel onglet"
Le bouton "Nouvel onglet", s'il est présent, doit ouvrir un nouvel onglet à une URL qui fait partie du champ d'application de l'application. L'application peut choisir de définir une URL et une icône personnalisées pour ce bouton. Les navigateurs peuvent choisir comment gérer le déplacement de ces onglets pour créer des fenêtres ou les combiner à des onglets de navigateur.
Les valeurs autorisées pour "new_tab_button" sont les suivantes:
"auto"pour laisser le navigateur déterminer quoi faire."absent"pour indiquer au navigateur de ne pas afficher de bouton de nouvel onglet.- Un objet avec deux sous-propriétés :
"url"avec les valeurs autorisées de"auto"ou une URL dans le champ d'application pour ouvrir de nouveaux onglets."icons"par les valeurs autorisées de"auto"ou un tableau d'icônes, comme dans la propriété"icons"principale.
Exemple complet
Voici un exemple complet permettant de configurer le comportement d'une application avec une interface à onglets:
{
"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"
}
]
}
}
}
Détecter le mode d'application à onglets
Les applications peuvent détecter si elles s'exécutent en mode application à onglets en vérifiant la fonctionnalité multimédia CSS display-mode en CSS ou en JavaScript:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Interaction avec l'API Launch Handler
L'API Launch Handler permet aux sites de rediriger les lancements d'applications dans des fenêtres d'application existantes pour éviter l'ouverture de fenêtres en double. Lorsqu'une application à onglets définit "client_mode": "navigate-new", les lancements d'application ouvrent un nouvel onglet dans une fenêtre d'application existante.
Démo
Vous pouvez essayer le mode d'application à onglets en définissant un indicateur de navigateur:
- Définissez l'indicateur
#enable-desktop-pwas-tab-strip. - Installez l'application tabbed-application-mode.glitch.me (code source).
- Cliquez sur les différents liens des différents onglets.
Commentaires
L'équipe Chrome souhaite connaître votre expérience avec le mode application à onglets.
Parlez-nous de la conception de l'API
Le mode d'application avec onglets ne fonctionne-t-il pas comme prévu ? Commentez le problème lié au fichier manifeste de l'application Web que nous avons créé.
Signaler un problème d'implémentation
Avez-vous détecté un bug dans l'implémentation de Chrome ? Signalez un bug sur le site new.crbug.com. Veillez à fournir autant de détails que possible et des instructions simples pour reproduire le bug, puis saisissez UI>Browser>WebAppInstalls dans la zone Composants.
Glitch est idéal pour partager des cas de reproduction rapidement et facilement.
Afficher la compatibilité avec l'API
Prévoyez-vous d'utiliser le mode d'application à onglets ? Votre assistance publique aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.
Envoyez un tweet à @ChromiumDev avec le hashtag #TabbedApplicationMode et indiquez-nous où et comment vous l'utilisez.
Liens utiles
- Explication
- Problème de spécification du fichier manifeste d'application Web
- Bug Chromium
- Composant clignotement :
UI>Browser>WebAppInstalls
Remerciements
Matt Giuca a exploré le mode application à onglets. L'implémentation expérimentale dans Chrome a été réalisée par Alan Cutter. Cet article a été examiné par Joe Medley. Image principale par Till Niermann sur Wikimedia Commons.
