Travaillez sur plusieurs documents à la fois grâce aux onglets de votre progressive web app
Dans le monde de l'informatique, la métaphore de bureau est une métaphore d'interface qui est un ensemble de concepts unifiants utilisés par les interfaces utilisateur graphiques (IUG) pour aider les utilisateurs à interagir plus facilement avec l'ordinateur. Conformément à la métaphore des ordinateurs de bureau, les onglets de l'IUG sont modélisés d'après les onglets de cartes traditionnels insérés dans les livres, les fichiers papier ou les index de cartes. Une interface de document à onglets (TDI) ou un onglet est un élément de commande graphique qui permet de contenir plusieurs documents ou panneaux dans une seule fenêtre en utilisant les 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 s'ils en ont besoin.
Qu'est-ce que le mode d'application à onglets ?
Quelque chose qui manquait jusqu'à présent à la plate-forme est un moyen de permettre aux développeurs de PWA de proposer à leurs utilisateurs une interface de document à onglets, par exemple pour permettre la modification de différents fichiers dans la même fenêtre de PWA. Le mode d'application par onglets comble cette lacune.
Cas d'utilisation suggérés pour le mode d'application à onglets
Voici quelques exemples de sites susceptibles d'utiliser le mode d'application par 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 d'avoir des conversations dans différentes salles par onglet.
- Applications de lecture qui ouvrent les liens vers des articles dans de nouveaux onglets intégrés
Différences par rapport aux onglets conçus par les développeurs
Le fait de disposer de documents dans des onglets de navigateur distincts permet d'isoler les ressources sans frais, ce qui n'est pas possible à l'heure actuelle sur le Web. Les onglets conçus par les développeurs ne seraient pas adaptés à des centaines d'onglets, comme le font les onglets de navigateur. Les affordances du navigateur telles que l'historique de navigation, "Copier cette URL de la page", "Caster cet onglet" ou "Ouvrir cette page dans un navigateur Web" seraient appliquées à la page de l'interface à onglets conçue par le développeur, mais pas à la page de document actuellement sélectionnée.
Différences par rapport à "display": "browser"
Le "display": "browser" actuel a déjà une signification spécifique:
Ouvre l'application Web en suivant la convention propre à 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 tout ce qu'ils souhaitent en ce qui concerne l'interface utilisateur, ce serait clairement une inversion des attentes des développeurs si "display": "browser" signifiait soudainement "s'exécuter dans une fenêtre spécifique à l'application distincte sans affordances du navigateur, mais avec une interface de document à onglets".
En définissant "display": "browser", vous désactivez le placement dans une fenêtre d'application.
État actuel
| Step | État |
|---|---|
| 1. Créer une vidéo explicative | Terminée |
| 2. Créer un brouillon initial de la spécification | Non démarrée |
| 3. Recueillir des commentaires et itérer sur la conception | En cours |
| 4. Phase d'évaluation | En cours |
| 5. lancement | Non démarrée |
Utilisation du mode d'application à onglets
Pour utiliser le mode 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 éventuellement être utilisée pour affiner le comportement des onglets. Elle possède 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 d'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 y est affichée.
Les valeurs autorisées pour "home_tab" sont les suivantes:
"auto"pour permettre au navigateur de déterminer l'action à effectuer"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 pour 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", s'il est présent, doit ouvrir un nouvel onglet à une URL comprise dans le 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 décider de la façon de gérer ces onglets pour créer des fenêtres ou les combiner avec des onglets du navigateur.
Les valeurs autorisées pour "new_tab_button" sont les suivantes:
"auto"pour permettre au navigateur de déterminer l'action à effectuer"absent"pour indiquer au navigateur de ne pas afficher de bouton "Nouvel onglet"- Un objet avec deux sous-propriétés :
"url"avec les valeurs autorisées de"auto"ou une URL couverte par le champ d'application pour laquelle 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
Voici un exemple complet de configuration du 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 dans 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 les fenêtres d'applications existantes pour empêcher l'ouverture de fenêtres en double. Lorsqu'une application à onglets définit "client_mode": "navigate-new", le lancement de l'application ouvre un nouvel onglet dans une fenêtre d'application existante.
Démonstration
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 dans les différents onglets.
Commentaires
L'équipe Chrome souhaite connaître votre avis sur le mode d'application à onglets.
Décrivez-nous la conception de l'API.
Y a-t-il quelque chose dans le mode d’application par onglets qui ne fonctionne pas comme prévu ? Commentez le problème lié au fichier manifeste d'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 new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que 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 rapide et facile.
Afficher la compatibilité avec l'API
Prévoyez-vous d'utiliser le mode d'application à onglets ? Votre assistance publique aide l'équipe Chrome à prioriser 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 lié aux spécifications du fichier manifeste d'application Web
- Bug Chromium
- Composant Blink:
UI>Browser>WebAppInstalls
Remerciements
Le mode d'application par onglets a été exploré par Matt Giuca. Cette implémentation expérimentale dans Chrome a été le travail d'Alan Cutter. Cet article a été lu par Joe Medley. Image héros de Till Niermann sur Wikimedia Commons.
