Praktische Funktionen mit Portals: Nahtlose Navigation im Web

Erfahren Sie, wie Sie mit der vorgeschlagenen Portals API die UX für die Navigation verbessern können.

Yusuke Utsunomiya

Für eine gute Nutzererfahrung ist es entscheidend, dass Ihre Seiten schnell geladen werden. Aber ein Bereich, den wir häufig übersehen, sind Seitenübergänge, also das, was die Nutzenden sehen, zwischen Seiten wechseln.

Mit dem neuen API-Vorschlag Portals für die Webplattform indem Sie die Navigation optimieren, während Nutzer auf Ihrer Website navigieren. Website.

Erlebe Portale in Aktion:

Was Portale ermöglichen

Single-Page-Anwendungen (SPAs) bieten schöne Übergänge allerdings auf Kosten der höheren Komplexität. Mehrseitige Anwendungen (MPAs) lassen sich viel einfacher erstellen. aber Sie haben am Ende einen leeren Bildschirm zwischen den Seiten.

Portale bieten das Beste aus beiden Welten: der geringen Komplexität einer MPA und den nahtlosen Übergängen einer SPA. Sie sind wie ein <iframe>, da sie Elemente einbetten, Aber im Gegensatz zu <iframe> haben sie auch Funktionen, mit denen sie zu ihren Inhalten gelangen können.

Sehen heißt glauben: Sehen Sie sich zuerst an, was wir beim Chrome Dev Summit 2018 vorgestellt haben:

Bei der klassischen Navigation müssen die Nutzenden mit einem leeren Bildschirm warten. bis der Browser das Ziel rendert. In Portalen sehen Nutzer eine Animation, während <portal> die Inhalte vorab rendert und eine nahtlose Navigation ermöglicht.

Vor Portalen hätten wir eine andere Seite mit <iframe> rendern können. Wir hätten auch Animationen hinzufügen können, um den Frame auf der Seite zu verschieben. Bei <iframe> können Sie jedoch nicht zum Inhalt wechseln. Portale schließen diese Lücke und ermöglichen interessante Anwendungsfälle.

Portale ausprobieren

Aktivierung über „about://flags“

Testen Sie Portale in Chrome 85 und höher, indem Sie ein experimentelles Flag setzen:

• Aktivieren Sie das Flag about://flags/#enable-portals für Navigationen am selben Ursprung.
• Zum Testen ursprungsübergreifender Navigationen aktivieren Sie zusätzlich das Flag about://flags/#enable-portals-cross-origin.

In dieser frühen Phase des Portal-Experiments Wir empfehlen außerdem, für Ihre Tests ein separates Nutzerdatenverzeichnis zu verwenden. indem Sie das Attribut --user-data-dir Befehlszeilen-Flag. Sobald Portale aktiviert sind, überprüfe in den Entwicklertools, ob du das neue glänzende HTMLPortalElement hast.

Portale implementieren

Sehen wir uns ein einfaches Beispiel für die Implementierung an.

// 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();
});

So einfach ist das. Probiere diesen Code in der Entwicklertools-Konsole aus. Die Wikipedia-Seite sollte geöffnet werden.

Wenn Sie etwas entwickeln möchten, das wir beim Chrome Dev Summit gezeigt haben, ist das folgende Snippet interessant.

// 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);

Die Funktionserkennung ist ebenfalls einfach, um eine Website mithilfe von Portalen schrittweise zu verbessern.

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

Wenn du schnell herausfinden möchtest, wie sich Portale anfühlen, versuche es mit uskay-portals-demo.glitch.me. Achten Sie darauf, dass Sie mit Chrome 85 oder höher darauf zugreifen, und aktivieren Sie das Flag „Experimental“.

1. Geben Sie eine URL ein, für die Sie eine Vorschau ansehen möchten.
2. Die Seite wird dann als <portal>-Element eingebettet.
3. Klicken Sie auf die Vorschau.
4. Die Vorschau wird nach einer Animation aktiviert.

Technische Daten ansehen

Wir diskutieren aktiv Portals-Spezifikation in der Web Incubation Community Group (WICG). Sehen Sie sich einige der wichtigen Szenarien. Dies sind die drei wichtigen Funktionen, mit denen Sie sich vertraut machen sollten:

• <portal>-Element:Das HTML-Element selbst. Die API ist sehr einfach. Sie besteht aus dem Attribut src, der Funktion activate und einer Schnittstelle für die Nachrichtenfunktion (postMessage). activate verwendet ein optionales Argument, um nach der Aktivierung Daten an <portal> zu übergeben.
• portalHost-Schnittstelle: Fügt dem window-Objekt ein portalHost-Objekt hinzu. So kannst du prüfen, ob die Seite als <portal>-Element eingebettet ist. Sie bietet auch eine Schnittstelle für die Nachrichtenübermittlung (postMessage) an den Host.
• Die Oberfläche „PortalActivateEvent“:Ein Ereignis, das ausgelöst wird, wenn <portal> aktiviert ist. Mit der Funktion adoptPredecessor kannst du die vorherige Seite als <portal>-Element abrufen. So kannst du nahtlos zwischen zwei Seiten navigieren und Inhalte erstellen.

Werfen wir einen Blick auf das grundlegende Nutzungsmuster. Im Folgenden findest du eine unvollständige Liste der Möglichkeiten, die dir Portale bieten, sowie Beispielcode.

Stil anpassen, wenn er als <portal>-Element eingebettet ist

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

Botschaft zwischen dem <portal>-Element und 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
});

Das Element <portal> aktivieren und das Ereignis portalactivate empfangen

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

Abrufen des Vorgängers

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

Wissen, dass Ihre Seite ein Vorgänger war

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

Durch die Kombination aller von Portalen unterstützten Funktionen können Sie tolle User Experiences schaffen. Die folgende Demo zeigt beispielsweise, wie Portale eine nahtlose Nutzererfahrung ermöglichen können. zwischen einer Website und eingebetteten Inhalten Dritter.

Anwendungsfälle und Pläne

Wir hoffen, dass Ihnen diese kurze Tour durch Portals gefallen hat. Wir sind gespannt, was dir einfällt. Sie können Portale beispielsweise für komplexe Navigationen verwenden, z. B. um die Seite für Ihr meistverkauftes Produkt von einer Seite mit Produktkategorie-Einträgen vorab zu rendern.

Wichtig zu wissen ist auch, dass Portale genau wie <iframe> in ursprungsübergreifenden Navigationen verwendet werden können. Wenn Sie also mehrere Websites haben, die aufeinander verweisen, können Sie auch Portale verwenden, um nahtlos zwischen zwei verschiedenen Websites zu navigieren. Dieser ursprungsübergreifende Anwendungsfall ist einzigartig für Portale und kann sogar die Nutzererfahrung von SPAs verbessern.

Wir freuen uns über euer Feedback!

Portale können in Chrome 85 und höher getestet werden. Feedback von der Community ist für das Design neuer APIs entscheidend. Probieren Sie es aus und teilen Sie uns Ihre Meinung mit. Wenn Sie Funktionsanfragen haben oder Feedback geben möchten, rufen Sie das WICG-GitHub-Repository auf.