Travailler sur plusieurs documents à la fois avec des onglets dans votre progressive web app
Dans le monde de l'informatique, la métaphore du bureau est une métaphore d'interface qui est un ensemble de concepts unificateurs 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 contrôle graphique qui permet de regrouper plusieurs documents ou panneaux dans une seule fenêtre, en utilisant des onglets comme widget de navigation pour basculer entre des ensembles de documents.
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 d'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 d'application à onglets comble cette lacune.
Cas d'utilisation suggérés pour le mode d'application à onglets
Voici quelques exemples de sites pouvant utiliser le mode application à onglets:
- Applications de productivité qui permettent à l'utilisateur de modifier plusieurs documents (ou fichiers) en même temps.
- Applications de communication qui permettent à l'utilisateur de discuter dans différents salons par onglet.
- Applications de lecture qui ouvrent les liens vers les 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 à l'aide de la convention propre à la plate-forme pour ouvrir les liens hypertextes dans l'agent utilisateur (par exemple, dans un onglet de navigateur ou dans 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".
Le paramètre "display": "browser" vous permet 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, la propriété "tab_strip" peut être utilisée pour affiner 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 effectuer de navigation. 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 à laquelle cet onglet est verrouillé et l'icône affichée sur l'onglet.
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"avec les valeurs autorisées de"auto"ou une URL à 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é"icons"principale.
Bouton "Nouvel onglet"
Le bouton "Nouvel onglet", le cas échéant, doit ouvrir un nouvel onglet à une URL qui relève du champ d'application. L'application peut choisir de définir une URL et une icône personnalisées pour ce bouton. Les navigateurs peuvent décider de la manière dont ils gèrent le glissement de ces onglets pour créer de nouvelles fenêtres ou les combiner avec 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"avec les valeurs autorisées de"auto"ou un tableau d'icônes comme dans la propriété"icons"principale.
Exemple complet
Un exemple complet de configuration du comportement d'une application avec une interface à onglets peut se présenter comme suit:
{
"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 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 trouvé un bug dans l'implémentation de Chrome ? Envoyez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème et saisissez UI>Browser>WebAppInstalls dans le champ 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 soutien public 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
Le mode d'application à onglets a été exploré par Matt Giuca. 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.
