Hier erfährst du, wie die vorgeschlagene Portals API deine Navigation verbessern kann.
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:
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.
- Geben Sie eine URL ein, deren Vorschau Sie ansehen möchten.
- Die Seite wird dann als
<portal>
-Element eingebettet. - Klicken Sie auf die Vorschau.
- 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 Attributsrc
, der Funktionactivate
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 demwindow
-Objekt einportalHost
-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 namensadoptPredecessor
, 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.
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.