Découvrez comment l'API Portals proposée peut améliorer l'expérience de navigation.
Assurer le chargement rapide de vos pages est essentiel pour offrir une bonne expérience utilisateur. Toutefois, 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 à y remédier en simplifiant l'expérience lorsque les utilisateurs naviguent sur votre site.
Découvrez Portals en action:
Fonctionnalités des portails
Les applications monopages (SPA, Single Page Application) offrent de belles transitions, mais leur création est plus complexe. Les applications multipages 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 avec 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, un <iframe>
ne vous permet pas d'accéder à son contenu. Les portails comblent cette lacune, ce qui permet de créer 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 indicateur expérimental:
- Activez l'indicateur
about://flags/#enable-portals
pour les navigations de même origine. - Pour tester les navigations inter-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.
- Saisissez l'URL que vous souhaitez prévisualiser.
- La page est ensuite intégrée en tant qu'élément
<portal>
. - Cliquez sur l'aperçu.
- L'aperçu sera activé après une animation.
Consultez les spécifications
Nous discutons activement de la spécification Portals au sein du groupe de la communauté d'incubation Web (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'attributsrc
, de la fonctionactivate
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 objetportalHost
à l'objetwindow
. 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éeadoptPredecessor
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.
Allons 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 du 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 inter-origine est très spécifique aux portails et peut même améliorer l'expérience utilisateur des SPA.
Donnez votre avis
Les portails sont prêts à être expérimenté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. Si vous avez des demandes de fonctionnalités ou des commentaires, veuillez consulter le dépôt GitHub du W3C.