Portali pratici: navigazione sul Web senza interruzioni

Scopri come l'API Portals proposta può migliorare la tua UX di navigazione.

Yusuke Utsunomiya

Assicurarsi che le pagine si carichino rapidamente è fondamentale per offrire una buona esperienza utente. Ma un'area che spesso trascuriamo sono le transizioni di pagina, ovvero le transizioni che gli utenti vedono quando passano da una pagina all'altra.

Una nuova proposta basata sull'API per la piattaforma web, chiamata Portali, ha lo scopo di semplificare questo processo semplificando l'esperienza degli utenti che navigano sul tuo sito.

Guarda i portali in azione:

Abilitazione dei portali

Le applicazioni a pagina singola (APS) offrono una buona transizione, ma richiedono una creazione più complessa. Le applicazioni multi-page (MPA) sono molto più facili da creare, ma finiscono per includere schermate vuote tra le pagine.

I portali offrono il meglio di entrambi i mondi: la bassa complessità di una MPA con le transizioni fluide di una SPA. Considerali come un <iframe> in quanto consentono l'incorporamento, ma a differenza di un <iframe>, dispongono anche di funzionalità per accedere ai loro contenuti.

Vedere per credere: per prima cosa, dai un'occhiata a cosa abbiamo presentato al Chrome Dev Summit 2018:

Con le navigazioni classiche, gli utenti devono attendere con una schermata vuota fino a quando il browser non completa il rendering della destinazione. Con i portali, gli utenti possono sperimentare un'animazione, mentre <portal> esegue il pre-rendering dei contenuti e crea un'esperienza di navigazione senza interruzioni.

Prima dei portali, avremmo potuto eseguire il rendering di un'altra pagina utilizzando un elemento <iframe>. Potremmo anche aggiungere animazioni per spostare il frame nella pagina. Tuttavia, un <iframe> non ti consente di esplorare i suoi contenuti. I portali colmano questo divario, consentendo casi d'uso interessanti.

Prova i portali

Attivazione tramite about://flags

Prova i portali in Chrome 85 e versioni successive visualizzando un flag dell'esperimento:

• Attiva il flag about://flags/#enable-portals per le navigazioni dalla stessa origine.
• Per testare le navigazioni multiorigine, abilita anche il flag about://flags/#enable-portals-cross-origin.

Durante questa fase iniziale dell'esperimento sui portali, ti consigliamo inoltre di utilizzare una directory dei dati utente completamente separata per i test impostando il flag della riga di comando --user-data-dir. Dopo aver attivato i portali, verifica in DevTools che hai il nuovo HTMLPortalElement brillante.

Implementazione dei portali

Esaminiamo un esempio di implementazione di base.

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

Niente di più semplice. Prova questo codice nella console DevTools. Dovrebbe aprirsi la pagina di Wikipedia.

Se volessi creare qualcosa di simile a quello che abbiamo mostrato al Chrome Dev Summit e che funziona esattamente come la demo precedente, sarà che ti interessi il seguente snippet.

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

Inoltre, è facile effettuare il rilevamento delle funzionalità per migliorare progressivamente un sito web tramite i portali.

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

Per vedere rapidamente come si presentano i portali, prova a utilizzare uskay-portals-demo.glitch.me. Assicurati di accedervi con Chrome 85 o versioni successive e attiva il flag sperimentale.

1. Inserisci un URL di cui vuoi visualizzare l'anteprima.
2. La pagina verrà quindi incorporata come elemento <portal>.
3. Fai clic sull'anteprima.
4. L'anteprima verrà attivata dopo un'animazione.

Dai un'occhiata alle specifiche

Stiamo discutendo attivamente delle specifiche dei portali nel Web Incubation Community Group (WICG). Per metterti rapidamente al passo, dai un'occhiata ad alcuni degli scenari principali. Di seguito sono riportate le tre funzionalità importanti con cui acquisire familiarità:

• L'elemento <portal>: l'elemento HTML stesso. L'API è molto semplice. È composto dall'attributo src, dalla funzione activate e da un'interfaccia per la messaggistica (postMessage). activate richiede un argomento facoltativo per passare i dati a <portal> al momento dell'attivazione.
• Interfaccia portalHost: aggiunge un oggetto portalHost all'oggetto window. In questo modo puoi verificare se la pagina è incorporata come elemento <portal>. Fornisce inoltre un'interfaccia per i messaggi (postMessage) per l'host.
• Interfaccia PortalActivateEvent: un evento che si attiva quando viene attivato <portal>. Esiste una funzione denominata adoptPredecessor che puoi utilizzare per recuperare la pagina precedente come elemento <portal>. Ciò consente di creare navigazioni fluide ed esperienze di scrittura tra due pagine.

Esaminiamo oltre il modello di utilizzo di base. Di seguito è riportato un elenco non esaustivo di ciò che puoi ottenere con i portali, oltre al codice di esempio.

Personalizza lo stile se incorporato come elemento <portal>

// Detect whether this page is hosted in a portal
if (window.portalHost) {
  // Customize the UI when being embedded as a portal
}

Messaggistica tra l'elemento <portal> e 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
});

Attivazione dell'elemento <portal> e ricezione dell'evento portalactivate in corso...

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

Recupero del predecessore

// Listen to the portalactivate event
window.addEventListener('portalactivate', (evt) => {
  // ... and creatively use the predecessor
  const portal = evt.adoptPredecessor();
  document.querySelector('someElm').appendChild(portal);
});

Sapere che la tua pagina è stata adottata come predecessore

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

Combinando tutte le funzionalità supportate dai portali, puoi creare esperienze utente davvero originali. Ad esempio, la demo seguente mostra come i portali possono consentire un'esperienza utente senza soluzione di continuità tra un sito web e contenuti incorporati di terze parti.

Casi d'uso e piani

Ci auguriamo che questo breve tour dei portali ti sia piaciuto. Non vediamo l'ora di scoprire cosa ti inventerai. Ad esempio, potresti voler iniziare a utilizzare i portali per navigazioni non banali come il pre-rendering della pagina del tuo prodotto best-seller da una pagina dell'elenco delle categorie di prodotto.

Un'altra cosa importante da sapere è che i portali possono essere utilizzati nelle navigazioni multiorigine, proprio come un <iframe>. Pertanto, se disponi di più siti web che si incrociano tra loro, puoi utilizzare anche i portali per creare navigazioni senza soluzione di continuità tra due siti diversi. Questo caso d'uso multiorigine è molto specifico per i portali e può persino migliorare l'esperienza utente delle APS.

I feedback sono ben accetti

I portali sono pronti per la sperimentazione in Chrome 85 e versioni successive. Il feedback della community è fondamentale per la progettazione delle nuove API, quindi provaci e dicci cosa ne pensi. Per eventuali richieste di funzionalità o feedback, vai al repository GitHub di WiCG.