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

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.

Portale in Aktion:

Was Portale ermöglichen

Single-Page-Anwendungen (SPAs) bieten schöne Übergänge, sind aber aufgrund ihrer Komplexität schwieriger zu erstellen. Mehrseitige Anwendungen (Multiple-Page-Anwendungen, MPAs) 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 sich sie wie <iframe> vorstellen, da sie Inhalte einbetten können. Im Gegensatz zu <iframe> bieten sie jedoch auch Funktionen, mit denen sie zu ihren 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 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 bewegen. Sie können jedoch nicht auf den Inhalt von <iframe> zugreifen. Portale schließen diese Lücke und ermöglichen interessante Anwendungsfälle.

Portale ausprobieren

Aktivierung über „about://flags“

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.
• Zum Testen ursprungsübergreifender Navigationen aktivieren Sie zusätzlich das Flag about://flags/#enable-portals-cross-origin.

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

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.

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 optimieren.

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, kannst du uskay-portals-demo.glitch.me verwenden. 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 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.

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 dem Thema vertraut zu werden. Mit den folgenden drei wichtigen Funktionen sollten Sie sich vertraut machen:

• <portal>-Element:Das HTML-Element selbst. Die API ist sehr einfach. Sie besteht aus dem src-Attribut, der activate-Funktion und einer Schnittstelle für Nachrichten (postMessage). activate nimmt ein optionales Argument an, um bei der Aktivierung Daten an die <portal> zu übergeben.
• portalHost-Oberflä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 Oberfläche „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 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
});

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

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

Indem du alle von Portalen unterstützten Funktionen kombinierst, kannst du wirklich tolle User Experiences erstellen. 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, 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 Produktkategorie-Eintragsseite aus 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 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. 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.