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 pour la navigation.

Yusuke Utsunomiya

Veillez à ce que vos pages se chargent rapidement pour offrir une expérience utilisateur de qualité. Mais un aspect que nous ignorons souvent concerne les transitions de page, c'est-à-dire ce que voient les utilisateurs lorsqu'ils passent d'une page à l'autre.

À cette fin, une nouvelle proposition d'API de la plate-forme Web, appelée Portals, vise à simplifier l'expérience des utilisateurs lorsqu'ils parcourent votre site.

Découvrez les portails en action:

Fonctionnement des portails

Les applications monopages (SPA) offrent de belles transitions, mais leur création s'avère plus complexe. Les applications multipages (MPA) 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 et les transitions fluides d'une SPA. Considérez-les comme un <iframe> en ce sens qu'ils permettent l'intégration de données, mais contrairement à un <iframe>, ils sont également dotés de fonctionnalités permettant d'accéder à leur contenu.

Pour voir, c'est croire : Veuillez d'abord découvrir ce que nous avons présenté lors du Chrome Dev Summit 2018:

Avec les navigations classiques, les utilisateurs doivent attendre avec un écran vide que le navigateur ait fini d'afficher la destination. Avec les portails, les utilisateurs peuvent voir une animation, tandis que <portal> préaffiche le contenu et crée une expérience de navigation fluide.

Avant les portails, nous aurions pu 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, un <iframe> ne vous permet pas d'accéder à son contenu. Les portails comblent cette lacune, ce qui permet des cas d'utilisation intéressants.

Essayer les portails

Activer via about://flags

Testez les portails dans Chrome 85 et les versions ultérieures en retournant un indicateur expérimental:

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

Au cours de cette première phase du test avec Portals, nous vous recommandons également d'utiliser un répertoire de données utilisateur entièrement 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

Examinons 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 Wikipédia devrait s'ouvrir.

Si vous souhaitez créer une structure semblable à celle que nous avons montrée au Chrome Dev Summit, qui fonctionne exactement comme dans la démonstration ci-dessus, l'extrait 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 les fonctionnalités afin d'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'apparence des portails, essayez d'utiliser uskay-portals-demo.glitch.me. Assurez-vous d'y accéder avec Chrome 85 ou version ultérieure et activez l'indicateur de test.

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

Consulter les spécifications

Nous étudions activement les spécifications des portails au sein du Web Incubation Community Group (WICG). Pour vous familiariser rapidement avec le produit, consultez certains des scénarios clés. Voici les trois fonctionnalités importantes à connaître:

• L'élément <portal>:l'élément HTML lui-même. L'API est très simple. Elle se compose de l'attribut src, de la fonction activate et d'une interface de messagerie (postMessage). activate utilise 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 pour envoyer des messages (postMessage) à l'hôte.
• Interface PortalActivateEvent:événement qui se déclenche lorsque <portal> est activé. Il existe une fonction pratique appelée adoptPredecessor, qui vous permet de récupérer la page précédente en tant qu'élément <portal>. Cela vous permet de créer des navigations fluides et des expériences composées entre deux pages.

Regardons au-delà du modèle d'utilisation de base. Voici une liste non exhaustive des possibilités qu'offrent les portails, ainsi que des exemples 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
}

Messages 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
});

Activer l'élément <portal> et recevoir 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érer le 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 si 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 sophistiquées. Par exemple, la démonstration ci-dessous montre comment les portails permettent d'offrir une expérience utilisateur fluide entre un site Web et un contenu tiers intégré.

Cas d'utilisation et plans

Nous espérons que cette courte visite guidée des portails vous a plu. Nous avons hâte de découvrir vos solutions. Par exemple, vous pouvez commencer à utiliser des portails pour les navigations complexes, telles que le préaffichage de la page de votre produit le plus vendu à partir d'une liste de catégories de produits.

Autre point important à savoir : les portails peuvent être utilisés pour la navigation multi-origine, tout comme les <iframe>. Ainsi, si vous possédez plusieurs sites Web qui se croisent les uns aux autres, vous pouvez également utiliser des portails pour faciliter la navigation entre deux sites Web différents. Ce cas d'utilisation multi-origine est unique 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 essentiels à la conception de nouvelles API. N'hésitez donc pas à l'essayer et à nous donner votre avis ! Si vous avez des demandes ou des commentaires sur les fonctionnalités, veuillez vous rendre sur le dépôt GitHub du WICG.