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

Pour offrir une expérience utilisateur de qualité, il est essentiel que vos pages se chargent rapidement. Mais un domaine que nous ignorons souvent concerne les transitions de page : ce que nos utilisateurs voient lorsqu'ils lorsqu'ils se déplacent d'une page à l'autre.

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

Découvrez les portails en action:

Fonctionnalités activées par les portails

Les applications monopages (SPA) offrent de belles transitions mais cela a un coût de plus en plus complexe à créer. Les applications multipages (MPA, Multi-Page 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 des <iframe>, en ce sens qu'elles permettent l'intégration, mais contrairement à <iframe>, ils proposent également des fonctionnalités pour accéder à leur contenu.

Voir pour croire: commencez par regarder ce que nous avons présenté lors du Chrome Dev Summit 2018:

Avec les navigations classiques, les utilisateurs doivent attendre avec un écran vide jusqu'à ce que le navigateur ait fini d'afficher la destination. Les portails permettent aux utilisateurs de découvrir une animation, tandis que <portal> prérend 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, 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

Activer via about://flags

Essayez les portails dans Chrome 85 et les versions ultérieures en actionnant un indicateur 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 de l'expérimentation des portails, nous vous recommandons également d'utiliser un répertoire de données utilisateur entièrement distinct pour vos tests. en paramétrant le --user-data-dir l'indicateur de ligne de commande. Une fois les portails activés, vérifiez dans les outils de développement que vous disposez bien de la nouvelle version de 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 voulez créer quelque chose comme nous l'avons vu lors du Chrome Dev Summit, qui fonctionne exactement comme la démonstration ci-dessus, l'extrait de code suivant peut vous intéresser.

// 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 caractéristiques 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');
  ...
}

Pour découvrir rapidement à quoi ressemblent les portails, essayez d'utiliser uskay-portals-demo.glitch.me. Assurez-vous d'y accéder avec Chrome 85 ou des versions ultérieures et d'activer l'indicateur d'expérimentation.

1. Saisissez une URL à 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 caractéristiques

Nous discutons activement Spécification des portails du Web Incubation Community Group (WICG). Pour être rapidement opérationnel, 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. 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) vers l'hôte.
• Interface PortalActivateEvent:événement qui se déclenche lorsque <portal> est activé. Il existe une fonction astucieuse appelée adoptPredecessor, que vous pouvez utiliser pour 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.

Intéressons-nous au-delà du modèle d'utilisation de base. Voici une liste non exhaustive des possibilités offertes par les portails, accompagnée d'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
}

Échange 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);
});

Connaître l'adoption de votre page en tant que 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 prises en charge par les portails, vous pouvez créer des expériences utilisateur vraiment sophistiquées. 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 tiers intégré.

Cas d'utilisation et plans

Nous espérons que cette brève visite des portails vous a plu ! Nous sommes impatients de découvrir vos projets. Par exemple, vous pouvez commencer à utiliser des portails pour des navigations complexes, telles que le préaffichage de la page de votre produit le plus vendu à partir d'une fiche de catégorie de produits.

Il est également important de savoir que les portails peuvent être utilisés dans les navigations multi-origines, tout comme un <iframe>. Ainsi, si vous disposez de plusieurs sites Web qui se croisent, vous pouvez également utiliser des portails pour créer des navigations fluides 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 essentiels pour la conception des nouvelles API. N'hésitez pas à les essayer et à nous dire ce que vous en pensez ! Si vous souhaitez demander l'ajout de fonctionnalités ou nous faire part de vos commentaires, veuillez accéder au dépôt GitHub du WICG.