Cette page a été traduite par l'API Cloud Translation.

Mode d'application par onglets pour les PWA

Travailler sur plusieurs documents à la fois avec des onglets dans votre progressive web app

Thomas Steiner

Dans le monde de l'informatique, la métaphore du bureau est une métaphore d'interface qui consiste en un ensemble de concepts unificateurs utilisés par les interfaces utilisateur graphiques (IUG) pour aider les utilisateurs à interagir plus intuitivement avec l'ordinateur. Conformément à la métaphore du bureau, les onglets de l'IUG sont calqués sur les onglets de cartes classiques 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. Les options sont 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. À l'aide de 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 du 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 associée à la présence de documents 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 du document sélectionné.

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	Terminée
3. Recueillir des commentaires et itérer sur la conception	Terminé
4. Essai Origin	Terminé
5. Lancer	Terminé (ChromeOS)

Utiliser le mode 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, l'objet suivant est utilisé par défaut:

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

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.

Le membre "home_tab" de l'objet "tab_strip" contient des informations sur un "onglet d'accueil" spécial qui sert de menu de premier niveau pour l'application. Il contient le membre suivant:

"scope_patterns": le membre "scope_patterns" est une liste de formats d'URL qui définissent la portée de l'onglet d'accueil par rapport à l'URL du fichier manifeste.

Bouton "Nouvel onglet"

Le membre "new_tab_button" de l'objet "tab_strip" décrit le comportement d'une affordance d'interface utilisateur (comme un bouton) qui, lorsqu'il est cliqué/activé, ouvre un nouveau contexte d'application dans la fenêtre de l'application. Il contient le membre suivant:

"url": le membre "url" est une chaîne qui représente une URL par rapport à l'URL du fichier manifeste qui est dans le champ d'application d'un fichier manifeste traité.

Une application dispose d'un bouton de nouvel onglet si le membre "url" de new_tab_button du fichier manifeste traité se trouve en dehors du champ d'application de l'onglet d'accueil. Si l'application ne comporte pas de bouton "Nouvel onglet", le navigateur ne met pas l'affordance "Nouvel onglet" à la disposition de l'utilisateur.

Exemple complet

Un exemple complet de configuration du comportement d'une application avec une interface à onglets peut se présenter comme suit:

{
  "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"
    }
  }
}

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 l'application à onglets sur ChromeOS:

Installez l'application tabbed-application-mode.glitch.me (code source).
Cliquez sur les différents liens des différents onglets.

Démonstration du mode d'application à onglets sur tabbed-application-mode.glitch.me.

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 ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions pour reproduire le problème et saisissez UI>Browser>WebAppInstalls dans le champ Composants. Glitch est idéal pour partager des cas de reproduction rapide.

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 Blink: 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. Ce document a été examiné par Joe Medley. Image principale par Till Niermann sur Wikimedia Commons.