Praktische Funktionen mit Portals: Nahtlose Navigation im Web

Hier erfährst du, wie die vorgeschlagene Portals API deine Navigation verbessern kann.

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, d. h. was unsere Nutzer sehen, wenn sie zwischen Seiten wechseln.

Ein neues API-Angebot für eine Webplattform namens Portale soll Ihnen dabei helfen, indem es die Navigation für Nutzer auf Ihrer Website vereinfacht.

Erlebe Portale in Aktion:

Nahtlose Einbettung und Navigation mit Portalen. Erstellt von Adam Argyle

Was Portale aktivieren

Single-Page-Anwendungen (SPAs) bieten zwar schöne Übergänge, gehen aber mit einer höheren Komplexität bei der Erstellung einher. Multi-Page-Anwendungen (MPAs) lassen sich viel einfacher erstellen, allerdings haben Sie zwischen den Seiten leere Bildschirme.

Portale bieten das Beste aus beiden Welten: die geringe Komplexität einer MPA und die nahtlosen Übergänge einer SPA. Sie können sie sich wie ein <iframe> vorstellen, da sie eingebettet werden können. Im Gegensatz zu <iframe> bieten sie aber auch Funktionen, mit denen sie zu ihren Inhalten gelangen können.

Sehen Sie sich am besten zuerst an, was wir auf dem Chrome Dev Summit 2018 vorgestellt haben:

Bei der klassischen Navigation müssen Nutzer mit einem leeren Bildschirm warten, bis der Browser das Rendering des Ziels abgeschlossen hat. Bei Portalen sehen Nutzer eine Animation, während <portal> Inhalte vorab rendert und so eine nahtlose Navigation ermöglicht.

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

Portale ausprobieren

Aktivierung über about://flags

Probieren Sie Portale in Chrome 85 und höher aus, indem Sie eine experimentelle Markierung setzen:

• Aktiviere das Flag about://flags/#enable-portals für Navigationen am selben Ursprung.
• Aktiviere zum Testen von ursprungsübergreifenden Navigationen zusätzlich das Flag about://flags/#enable-portals-cross-origin.

In dieser frühen Phase des Portals-Tests empfehlen wir außerdem die Verwendung eines völlig separaten Nutzerdatenverzeichnisses für Ihre Tests. Dazu legen Sie das Befehlszeilen-Flag --user-data-dir fest. Sobald die Portale aktiviert sind, prüfe in den Entwicklertools, ob du die neue glänzende HTMLPortalElement hast.

Portale implementieren

Sehen wir uns ein einfaches Implementierungsbeispiel 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 sich öffnen.

Wenn Sie etwas erstellen wollten, wie wir es auf dem Chrome Dev Summit gezeigt haben, das genau wie die Demo oben funktioniert, ist das folgende Snippet von Interesse.

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

Es ist auch einfach, eine Funktionserkennung zu ermöglichen, um eine Website mithilfe von Portals schrittweise zu verbessern.

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

Wenn du schnell erfahren möchtest, wie Portals aussehen, verwende uskay-portals-demo.glitch.me. Sie müssen mit Chrome 85 oder höher darauf zugreifen und die experimentelle Markierung aktivieren.

1. Geben Sie eine URL ein, deren Vorschau Sie 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

In der Web Incubation Community Group (WICG) diskutieren wir aktiv über die Portale-Spezifikation. Werfen Sie einen Blick auf einige der Schlüsselszenarien, um schon bald produktiv arbeiten zu können. Dies sind die drei wichtigen Funktionen, mit denen Sie sich vertraut machen sollten:

• <portal>-Element:das HTML-Element Die API ist sehr einfach. Sie besteht aus dem Attribut src, der Funktion activate und einer Schnittstelle für Nachrichten (postMessage). activate verwendet ein optionales Argument, um bei 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.
• PortalActivateEvent:Ein Ereignis, das ausgelöst wird, wenn <portal> aktiviert wird. Es gibt eine praktische Funktion namens adoptPredecessor, mit der Sie die vorherige Seite als <portal>-Element abrufen können. So kannst du nahtlose Navigationen und kompakte Erlebnisse zwischen zwei Seiten schaffen.

Werfen wir einen Blick über das grundlegende Nutzungsmuster. Im Folgenden finden Sie eine unvollständige Liste dessen, was Sie mit Portals erreichen können, zusammen mit dem 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
}

Kommunikation 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 <portal>-Element wird aktiviert und das portalactivate-Ereignis 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;
});

Vorgänger abrufen

// 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 als Vorgänger angenommen wurde

// 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 kannst du ein wirklich geniales Nutzererlebnis schaffen. Die folgende Demo zeigt beispielsweise, wie Portale eine nahtlose Nutzererfahrung zwischen einer Website und eingebetteten Inhalten von Drittanbietern ermöglichen können.

Hinweis : Sind Sie an dieser Demo interessiert? Verzweigen Sie ihn auf GitHub und erstellen Sie Ihre eigene Version.

Anwendungsfälle und Pläne

Wir hoffen, dass dir diese kurze Tour durch die Portale gefallen hat! Wir sind gespannt, was du dir einfallen lassen wirst. Sie können beispielsweise Portale für nicht triviale Navigation nutzen, zum Beispiel, um die Seite für Ihr meistverkauftes Produkt über eine Seite mit Produktkategorieeinträgen vorab zu rendern.

Ein weiterer wichtiger Punkt ist, dass Portals wie <iframe> bei ursprungsübergreifenden Navigationen verwendet werden können. Wenn Sie also mehrere Websites haben, die sich gegenseitig ergänzen, können Sie auch Portale nutzen, um nahtlose Navigationen zwischen zwei verschiedenen Websites zu ermöglichen. Dieser ursprungsübergreifende Anwendungsfall gibt es nur bei Portals 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 aus der Community ist für das Design der neuen APIs sehr wichtig. Probieren Sie es aus und teilen Sie uns Ihre Meinung mit! Wenn du Funktionsanfragen oder Feedback hast, besuche bitte das WICG-GitHub-Repository.