Want to see how the new proposed Portals API improves the page-jumping user experience? This paper mainly explains in detail the specific content of Portals, the trial of Portals in Chrome Canary, and the specifications of Portals. If you want to make it easier for your users to jump from page to page, read this article.
Making sure pages load quickly is key to providing a good user experience. But one area we often overlook is page transitions, which are what users see as they move from page to page.
A proposed new Web platform API called Portals could help achieve this goal by allowing users to navigate a site more smoothly from one page to another. This video shows Portals in action.
Portals bring to the table
Single-page applications (SPAs) provide good page transitions, but at the cost of higher build complexity. Multi-page applications (MPA) are easier to build, but the result is blank screen content as pages jump between.
Portals take the best of both worlds: they combine the low complexity of MPA with the seamless transition effect of SPA. You can think of them as an IFrame in which you can embed content. But unlike iframes, they also have the ability to jump to their contents.
Seeing is believing, so take a look at what we showed at the Chrome Developer Summit last year.
With classic jumps, the user must look at a blank screen while waiting until the browser has rendered the target page. With Portals, users can now experience animations while waiting, while Portal prerenders content and creates a seamless jump experience.
Before Portals were invented, we could use iframe to pre-render another page. We can also add animations to move the frame around the page. But iframe doesn’t let you jump to the content. Portals fill this gap, allowing for some interesting use cases.
Try Portals in Chrome Canary
To try Portals in Chrome Canary, simply enable an experimental flag: Chrome ://flags/#enable-portals
At this early stage of the Portals experiment, we also recommend setting the –user-data-dir command line flag to test with a completely separate user data directory. With Portals enabled, verify in development tools that you have a new HTMLPortalElement.
Let’s look at a basic example.
// Create a portal with a Wikipedia page and embed it.
// (like an iframe). You can also use the <portal> flag.
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) :
// Play a nice animation, such as unfolding...
// The animation ends when the actual jump is complete.
portal.activate();
Copy the codeIt’s that simple. Try this code in the development tools console and it should bring up the Wikipedia page.
If you want to build an effect like the one we showed at Chrome Developer Summit, as demonstrated in the video above, then check out this interesting code below.
// Add some transition styles
const style = document.createElement('style');
style.innerHTML = `
portal {
position:fixed;
width: 100%;
height: 100%;
opacity: 0;
box-shadow: 0 0 20px 10px #999;
The 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 {
The transition: 0.4 s transform;
}
@media (prefers-reduced-motion: reduce) {
.portal-transition {
The transition: 0.001 s transform;
}
}
.portal-reveal {
TranslateX transform: scale (1.0) (px) - 20 translateY (20 px);
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
`;
const portal = document.createElement('portal');
// Jump to WICG Portals Spec page
portal.src = 'https://wicg.github.io/portals/';
// Add a class that defines the transition effect. Consider using
// 'bana-reduced-motion' media query
// https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
portal.classList.add('portal-transition');
portal.addEventListener('click', evt => {
// Displays animation of portal during user interaction
portal.classList.add('portal-reveal');
});
portal.addEventListener('transitionend', evt => {
if (evt.propertyName == 'transform') {
// Activate the portal when the transition effect is complete
portal.activate();
}
});
document.body.append(style, portal);
Copy the codeIt is also easy to detect functionality, allowing for incremental enhancements to the site using Portals.
if ('HTMLPortalElement' in window) {
// If this platform has Portals...
const portal = document.createElement('portal');
.
}
Copy the codeIf you want a quick Portal feel, try uskay-placeless-demo.glitch.me. Use Chrome Canary to access it and turn on the experimental flag!
1. Enter the URL you want to preview.
2. The page will then be embedded as an element.
3. Click Preview.
4. The preview will be activated after the animation plays.
See the specification
We are actively discussing the specification of Portals within the Web Incubation Community Group (WICG). To keep up with the latest, check out explainer. Here are three important features to familiarize yourself with:
-
Portal element: THE HTML element itself. The API is very simple. It consists of a SRC attribute, a activate function, and a message passing interface (postMessage). Activate takes an optional parameter to pass data to the portal upon activation.
-
PortalHost interface: Adds a portalHost object to the Window object. This allows you to check whether the page is embedded as a portal element. It also provides an interface for postMessage back to the host.
-
PortalActivateEvent Interface: Event triggered when the Portal is activated. There is a neat function called adoptPredecessor that you can use to retrieve the previous page as a Portal element. This allows you to create seamless jumps and composite experiences between the two pages.
Let’s look beyond the basic usage patterns. Here is a detailed list of what Portals can do with sample code.
Custom styles when embedded as elements
// Check whether the page is hosted by a portal
if (window.portalHost) {
// Customize UI when embedded as portal
}
Copy the codeMessage passing between the element and portalHost
// Send a message to the Portal element
const portal = document.querySelector('portal');
portal.postMessage({someKey: someValue}, ORIGIN);
// Receive messages through window.portalhost
window.portalHost.addEventListener('message', evt => {
const data = evt.data.someKey;
// Handle events
});
Copy the codeActivate the element and receive the PortalActivate event
// You can optionally add data to the parameters of the activation function
portal.activate({data: {'somekey': 'somevalue'}});
// The portal content receives the PortalActivate event during activation
window.addEventListener('portalactivate', evt => {
// Data is available as evt.data
const data = evt.data;
});
Copy the codeAccess to previous page
// Listen for portalactivate events
window.addEventListener('portalactivate', evt => {
/ /... Use the front page creatively
const portal = evt.adoptPredecessor();
document.querySelector('someElm').appendChild(portal);
});
Copy the codeKnow that your page has been treated as the previous page
// The activation function returns a Promise.
// When a promise resolves, it means that the portal has been activated.
// If the document is adopted, window.portalhost will exist.
portal.activate().then(_ => {
// Check that the document is adopted by the Portal element.
if (window.portalHost) {
// You can start communicating with portal elements
// Listen for messages
window.portalHost.addEventListener('message', evt => {
// Handle events
});
}
});
Copy the codeBy combining all of these features that Portals support, you can build a very polished user experience. For example, this video demonstrates how Portal enables a seamless user experience between web sites and third-party embedded content.
Interested in this demo? Fork it on GitHub and build your own version.
Use cases and plans
We hope you enjoyed this short introduction to Portals! We can’t wait to see what you come up with. You might want to start using Portals for unconventional jumps, such as pre-rendering a best-selling product page from a product category list page.
Another important thing is that Portals can be used for cross-domain jumps just like iframe. So if you have multiple sites that cross-reference each other, you can also use Portals to create seamless jumps between two different sites. This is a unique use case for Portals and could even improve the SPA user experience.
Welcome feedback
The Portals proposal is still in its early stages, so not everything works properly (which is why it is behind the experimental sign). That said, it’s ready to experiment in Chrome Canary. Community feedback is crucial to the design of the new API, so give it a try and let us know what you think! You can check the current restrictions on the Chromium error tracker. If you have any feature requests or feedback please refer to the WICG GitHub repository.
Original link: https://web.dev/hands-on-portals/