Praktische Funktionen mit Portals: Nahtlose Navigation im Web

Hier erfahren Sie, wie Sie mit der vorgeschlagenen Portals API die Nutzerfreundlichkeit der Navigation verbessern können.

Yusuke Utsunomiya
Yusuke Utsunomiya

Schnelle Seitenladezeiten sind entscheidend für eine gute Nutzererfahrung. Ein Bereich, der oft übersehen wird, sind Seitenübergänge – was Nutzer sehen, wenn sie zwischen Seiten wechseln.

Ein neuer API-Vorschlag für Webplattformen namens Portals soll dabei helfen, die Navigation der Nutzer auf Ihrer Website zu optimieren.

Portals in Aktion:

Nahtlose Einbettung und Navigation mit Portalen. Erstellt von Adam Argyle.

Was Portale ermöglichen

Single-Page-Anwendungen (SPAs) bieten schöne Übergänge, sind aber aufgrund ihrer Komplexität schwieriger zu erstellen. Mehrseitige Anwendungen sind viel einfacher zu erstellen, aber zwischen den Seiten werden leere Bildschirme angezeigt.

Portale bieten das Beste aus beiden Welten: die geringe Komplexität einer MPA mit den nahtlosen Übergängen einer SPA. Sie können sie als <iframe> betrachten, da sie das Einbetten ermöglichen. Im Gegensatz zu <iframe> bieten sie jedoch auch Funktionen, mit denen Sie zu den Inhalten gelangen können.

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

Bei der klassischen Navigation müssen Nutzer warten, bis der Browser das Ziel fertig gerendert hat. Bei Portalen sehen Nutzer eine Animation, während die <portal> Inhalte vorab rendert und eine nahtlose Navigation ermöglicht.

Vor Portals hätten wir eine weitere Seite mit einem <iframe> gerendert. Wir hätten auch Animationen hinzufügen können, um den Frame auf der Seite zu bewegen. Bei einem <iframe> kannst du jedoch nicht zu den Inhalten wechseln. Portale schließen diese Lücke und ermöglichen interessante Anwendungsfälle.

Portale ausprobieren

Über about://flags aktivieren

Sie können Portale in Chrome 85 und höher testen, indem Sie ein experimentelles Flag aktivieren:

  • Aktivieren Sie das Flag about://flags/#enable-portals für Navigationen innerhalb desselben Ursprungs.
  • Wenn Sie plattformübergreifende Navigationen testen möchten, aktivieren Sie zusätzlich das Flag about://flags/#enable-portals-cross-origin.

In dieser frühen Phase des Portaltests empfehlen wir außerdem, für Ihre Tests ein völlig separates Verzeichnis für Nutzerdaten zu verwenden. Legen Sie dazu die Befehlszeilenoption --user-data-dir fest. Sobald Portals aktiviert sind, prüfen Sie in den DevTools, ob das neue HTMLPortalElement angezeigt wird.

Screenshot der DevTools-Konsole mit dem HTMLPortalElement

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. Probieren Sie diesen Code in der DevTools-Konsole aus. Die Wikipedia-Seite sollte geöffnet werden.

Ein GIF der Demo für den Vorschau-Portalstil

Wenn Sie etwas wie das auf der Chrome Dev Summit gezeigte Beispiel erstellen möchten, das genauso funktioniert wie die Demo oben, 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);

Außerdem ist es mithilfe von Portalen ganz einfach, Funktionen zu erkennen und eine Website kontinuierlich zu verbessern.

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

Wenn Sie schnell ausprobieren möchten, wie Portals funktionieren, probieren Sie uskay-portals-demo.glitch.me aus. Sie müssen Chrome 85 oder höher verwenden und die experimentelle Funktion aktivieren.

  1. Geben Sie eine URL ein, für die Sie eine Vorschau anzeigen lassen 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.

Ein GIF, in dem die Glitch-Demo für Portale verwendet wird

Spezifikation ansehen

Wir diskutieren die Portals-Spezifikation aktiv in der Web Incubation Community Group (WICG). Sehen Sie sich einige der wichtigsten Szenarien an, um schnell mit der Arbeit zu beginnen. Mit den folgenden drei wichtigen Funktionen sollten Sie sich vertraut machen:

  • Das <portal>-Element:Das HTML-Element selbst. Die API ist sehr einfach. Sie besteht aus dem src-Attribut, der activate-Funktion und einer Benutzeroberfläche für Nachrichten (postMessage). activate nimmt ein optionales Argument an, um bei der Aktivierung Daten an die <portal> zu übergeben.
  • portalHost-Benutzeroberfläche:Dem window-Objekt wird ein portalHost-Objekt hinzugefügt. So können Sie prüfen, ob die Seite als <portal>-Element eingebettet ist. Außerdem bietet es eine Schnittstelle für Nachrichten (postMessage) zurück an den Host.
  • Die Schnittstelle „PortalActivateEvent“:Ein Ereignis, das ausgelöst wird, wenn die <portal> aktiviert wird. Es gibt eine praktische Funktion namens adoptPredecessor, mit der Sie die vorherige Seite als <portal>-Element abrufen können. So können Sie eine nahtlose Navigation und eine einheitliche Darstellung zwischen zwei Seiten erstellen.

Sehen wir uns das grundlegende Nutzungsmuster genauer an. Im Folgenden finden Sie eine unvollständige Liste der Möglichkeiten, die sich mit Portalen 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
}

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

<portal>-Element aktivieren und 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 übernommen 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
    });
  }
});

Wenn Sie alle von Portalen unterstützten Funktionen kombinieren, können Sie eine wirklich beeindruckende User Experience schaffen. In der folgenden Demo wird beispielsweise gezeigt, wie Portale eine nahtlose Nutzererfahrung zwischen einer Website und eingebetteten Inhalten von Drittanbietern ermöglichen können.

Anwendungsfälle und Pläne

Wir hoffen, dass Ihnen diese kurze Einführung in Portale gefallen hat. Wir sind gespannt auf eure Ideen. Sie können Portale beispielsweise für komplexe Navigationen verwenden, z. B. um die Seite für Ihr Bestsellerprodukt von einer Seite mit Produktkategorieeinträgen vorab zu rendern.

Außerdem können Portale wie <iframe> für plattformübergreifende Navigationen verwendet werden. Wenn Sie also mehrere Websites haben, die sich gegenseitig verweisen, können Sie mithilfe von Portalen eine nahtlose Navigation zwischen zwei verschiedenen Websites erstellen. Dieser plattformübergreifende Anwendungsfall ist für Portale sehr einzigartig und kann sogar die Nutzerfreundlichkeit von SPAs verbessern.

Wir freuen uns über euer Feedback!

Portale können in Chrome 85 und höher getestet werden. Das Feedback der Community ist entscheidend für die Entwicklung neuer APIs. Testen Sie die API also und teilen Sie uns Ihre Meinung mit. Wenn du Funktionsanfragen oder Feedback hast, besuche das WICG-GitHub-Repository.