Pratique des portails: une navigation simplifiée sur le Web

Découvrez comment l'API Portals proposée peut améliorer l'expérience utilisateur de navigation.

Yusuke Utsunomiya

Assurer le chargement rapide de vos pages est essentiel pour offrir une bonne expérience utilisateur. Mais un aspect que nous négligeons souvent est les transitions de page, c'est-à-dire ce que nos utilisateurs voient lorsqu'ils passent d'une page à l'autre.

Une nouvelle proposition d'API de plate-forme Web appelée Portals vise à faciliter la tâche en simplifiant l'expérience des utilisateurs sur votre site.

Découvrez Portals en action :

Fonctionnalités activées par les portails

Les applications monopages (SPA, Single Page Application) offrent de belles transitions, mais leur création est plus complexe. Les applications multipages (MPA, Multipage Applications) sont beaucoup plus faciles à créer, mais vous vous retrouvez avec des écrans vides entre les pages.

Les portails offrent le meilleur des deux mondes : la faible complexité d'une MPA avec les transitions fluides d'une SPA. Considérez-les comme un <iframe> en ce sens qu'ils permettent l'intégration, mais contrairement à un <iframe>, ils sont également dotés de fonctionnalités permettant d'accéder à leur contenu.

Pour voir, il faut le faire : regardez d'abord ce que nous avons présenté lors du Chrome Dev Summit 2018 :

Avec les navigations classiques, les utilisateurs doivent attendre sur un écran vide jusqu'à ce que le navigateur ait terminé de générer la destination. Avec les portails, les utilisateurs peuvent profiter d'une animation, tandis que <portal> prérend le contenu et crée une expérience de navigation fluide.

Avant Portals, nous pouvions afficher une autre page à l'aide d'un <iframe>. Nous aurions également pu ajouter des animations pour déplacer le cadre sur la page. Toutefois, une <iframe> ne vous permet pas d'accéder à son contenu. Les portails comblent cet écart, permettant des cas d'utilisation intéressants.

Essayer les portails

Activation via about://flags

Essayez les portails dans Chrome 85 et les versions ultérieures en activant un flag expérimental :

• Activez l'indicateur about://flags/#enable-portals pour les navigations de même origine.
• Pour tester les navigations multi-origines, activez également l'indicateur about://flags/#enable-portals-cross-origin.

Au cours de cette première phase du test des portails, nous vous recommandons également d'utiliser un répertoire de données utilisateur complètement distinct pour vos tests en définissant l'indicateur de ligne de commande --user-data-dir. Une fois les portails activés, vérifiez dans les outils de développement que vous disposez du nouveau HTMLPortalElement.

Implémenter des portails

Prenons un exemple d'implémentation de base.

// Create a portal with the wikipedia page, and embed it
// (like an iframe). You can also use the <portal> tag instead.
portal = document.createElement('portal');
portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web';
portal.style = '...';
document.body.appendChild(portal);

// When the user touches the preview (embedded portal):
// do fancy animation, e.g. expand …
// and finish by doing the actual transition.
// For the sake of simplicity, this snippet will navigate
// on the `onload` event of the Portals element.
portal.addEventListener('load', (evt) => {
   portal.activate();
});

C'est aussi simple que cela. Essayez ce code dans la console DevTools. La page Wikipedia devrait s'ouvrir.

Si vous souhaitez créer quelque chose comme ce que nous avons présenté lors du Chrome Dev Summit, qui fonctionne exactement comme la démonstration ci-dessus, l'extrait de code suivant vous intéressera.

// Adding some styles with transitions
const style = document.createElement('style');
style.innerHTML = `
  portal {
    position:fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    box-shadow: 0 0 20px 10px #999;
    transform: scale(0.4);
    transform-origin: bottom left;
    bottom: 20px;
    left: 20px;
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
  }
  .portal-transition {
    transition: transform 0.4s;
  }
  @media (prefers-reduced-motion: reduce) {
    .portal-transition {
      transition: transform 0.001s;
    }
  }
  .portal-reveal {
    transform: scale(1.0) translateX(-20px) translateY(20px);
  }
  @keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
`;
const portal = document.createElement('portal');
// Let's navigate into the WICG Portals spec page
portal.src = 'https://wicg.github.io/portals/';
// Add a class that defines the transition. Consider using
// `prefers-reduced-motion` media query to control the animation.
// https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
portal.classList.add('portal-transition');
portal.addEventListener('click', (evt) => {
  // Animate the portal once user interacts
  portal.classList.add('portal-reveal');
});
portal.addEventListener('transitionend', (evt) => {
  if (evt.propertyName == 'transform') {
    // Activate the portal once the transition has completed
    portal.activate();
  }
});
document.body.append(style, portal);

Il est également facile de détecter des fonctionnalités pour améliorer progressivement un site Web à l'aide de portails.

if ('HTMLPortalElement' in window) {
  // If this is a platform that have Portals...
  const portal = document.createElement('portal');
  ...
}

Si vous souhaitez découvrir rapidement l'expérience Portals, essayez d'utiliser uskay-portals-demo.glitch.me. Assurez-vous d'y accéder avec Chrome 85 ou une version ultérieure, et d'activer l'indicateur expérimental.

1. Saisissez l'URL que vous souhaitez prévisualiser.
2. La page est ensuite intégrée en tant qu'élément <portal>.
3. Cliquez sur l'aperçu.
4. L'aperçu s'active après une animation.

Consultez les spécifications

Nous étudions activement la spécification des Portals au sein du Web Incubation Community Group (WICG). Pour vous familiariser rapidement avec cette fonctionnalité, consultez certains des principaux scénarios. Voici les trois fonctionnalités importantes à connaître :

• Élément <portal> : élément HTML lui-même. L'API est très simple. Il se compose de l'attribut src, de la fonction activate et d'une interface de messagerie (postMessage). activate accepte un argument facultatif pour transmettre des données à <portal> lors de l'activation.
• Interface portalHost : ajoute un objet portalHost à l'objet window. Cela vous permet de vérifier si la page est intégrée en tant qu'élément <portal>. Il fournit également une interface de messagerie (postMessage) à l'hôte.
• Interface PortalActivateEvent : événement déclenché lorsque <portal> est activé. Il existe une fonction intéressante appelée adoptPredecessor que vous pouvez utiliser pour récupérer la page précédente en tant qu'élément <portal>. Vous pouvez ainsi créer des navigations fluides et des expériences composées entre deux pages.

Intéressons-nous au-delà du modèle d'utilisation de base. Voici une liste non exhaustive des fonctionnalités que vous pouvez utiliser avec les portails, ainsi qu'un exemple de code.

Personnaliser le style lorsqu'il est intégré en tant qu'élément <portal>

// Detect whether this page is hosted in a portal
if (window.portalHost) {
  // Customize the UI when being embedded as a portal
}

Messagerie entre l'élément <portal> et portalHost

// Send message to the portal element
const portal = document.querySelector('portal');
portal.postMessage({someKey: someValue}, ORIGIN);

// Receive message via window.portalHost
window.portalHost.addEventListener('message', (evt) => {
  const data = evt.data.someKey;
  // handle the event
});

Activation de l'élément <portal> et réception de l'événement portalactivate

// You can optionally add data to the argument of the activate function
portal.activate({data: {somekey: 'somevalue'}});

// The portal content will receive the portalactivate event
// when the activate happens
window.addEventListener('portalactivate', (evt) => {
  // Data available as evt.data
  const data = evt.data;
});

Récupération du prédécesseur

// Listen to the portalactivate event
window.addEventListener('portalactivate', (evt) => {
  // ... and creatively use the predecessor
  const portal = evt.adoptPredecessor();
  document.querySelector('someElm').appendChild(portal);
});

Savoir que votre page a été adoptée comme prédécesseur

// The activate function returns a Promise.
// When the promise resolves, it means that the portal has been activated.
// If this document was adopted by it, then window.portalHost will exist.
portal.activate().then(() => {
  // Check if this document was adopted into a portal element.
  if (window.portalHost) {
    // You can start communicating with the portal element
    // i.e. listen to messages
    window.portalHost.addEventListener('message', (evt) => {
      // handle the event
    });
  }
});

En combinant toutes les fonctionnalités compatibles avec les portails, vous pouvez créer des expériences utilisateur vraiment attrayantes. Par exemple, la démonstration ci-dessous montre comment les portails peuvent offrir une expérience utilisateur fluide entre un site Web et un contenu intégré tiers.

Cas d'utilisation et plans

Nous espérons que cette brève visite de Portals vous a plu. Nous sommes impatients de découvrir vos prochaines créations. Par exemple, vous pouvez commencer à utiliser les portails pour des navigations non triviales, comme le pré-rendu de la page de votre produit le plus vendu à partir d'une page de fiche de catégorie de produits.

Il est également important de savoir que les portails peuvent être utilisés dans les navigations inter-origines, tout comme un <iframe>. Par conséquent, si vous avez plusieurs sites Web qui se référent les uns aux autres, vous pouvez également utiliser des portails pour créer une navigation fluide entre deux sites Web différents. Ce cas d'utilisation multi-origine est très propre aux portails et peut même améliorer l'expérience utilisateur des applications monopages.

Donnez votre avis

Les portails sont prêts à être testés dans Chrome 85 et les versions ultérieures. Les commentaires de la communauté sont cruciaux pour la conception de nouvelles API. Alors, n'hésitez pas à les essayer et à nous faire part de vos commentaires. Pour toute demande de fonctionnalité ou tout commentaire, veuillez accéder au dépôt GitHub du WICG.