Praktyczna obsługa portali: łatwa nawigacja w internecie

Dowiedz się, jak proponowany interfejs Portals API może poprawić wygodę korzystania z nawigacji.

Yusuke Utsunomiya

Szybkie wczytywanie stron ma kluczowe znaczenie dla wygody użytkowników. Często jednak pomijamy przejścia między stronami. To, co widzą użytkownicy, poruszają się między stronami.

Celem nowej oferty interfejsu API platformy internetowej o nazwie Portals jest możesz sobie w tym pomóc, ułatwiając użytkownikom poruszanie się po witrynie.

Zobacz portale w akcji:

Co umożliwiają portale

Płynne przejście przez aplikacje na jednej stronie (SPA) ale ich opracowanie będzie kosztować więcej. Aplikacje wielostronicowe (MPA) są znacznie łatwiejsze do utworzenia, ale między stronami wyświetlają się puste ekrany.

Portale oferują to, co najlepsze w obu tych miejscach: która cechuje się małą złożonością MPA i płynnymi przejściami w przypadku SPA. Możesz je traktować jak <iframe>, ponieważ umożliwiają umieszczanie, ale w przeciwieństwie do <iframe>, użytkownicy mogą też korzystać z funkcji umożliwiających nawigację do treści.

Dostrzeganie to wiarygodność: zapoznaj się najpierw z aplikacją Chrome Dev Summit 2018:

W przypadku klasycznej nawigacji użytkownicy muszą poczekać z pustym ekranem. dopóki przeglądarka nie zakończy renderowania strony docelowej. Portale pozwalają użytkownikom obejrzeć animację, a <portal> wstępnie renderuje treści i zapewnia płynną nawigację.

Przed wprowadzeniem portali renderowaliśmy inną stronę za pomocą atrybutu <iframe>. Moglibyśmy też dodać animacje, które poruszają klatkę po stronie. ale nie możesz przejść do treści pliku <iframe>. Portale wypełniają tę lukę, oferując ciekawe przypadki użycia.

Wypróbuj portale

Włączanie przez about://flags

Wypróbuj portale w Chrome 85 i nowszych wersjach, ustawiając odpowiednią flagę eksperymentalną:

• Włącz flagę about://flags/#enable-portals w przypadku nawigacji z tej samej domeny.
• Aby testować nawigację między domenami, dodatkowo włącz flagę about://flags/#enable-portals-cross-origin.

Na tej wczesnej fazie eksperymentu z portalami zalecamy też na potrzeby testów użyć zupełnie oddzielnego katalogu danych użytkownika Ustaw wartość --user-data-dir flagi wiersza poleceń. Po włączeniu portali sprawdź w Narzędziach deweloperskich, czy masz nową wersję HTMLPortalElement.

Wdrażanie portali

Przyjrzyjmy się podstawowej implementacji.

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

To bardzo proste. Spróbuj wpisać ten kod w konsoli Narzędzi deweloperskich. Otworzy się strona w Wikipedii.

Jeśli chcecie stworzyć coś takiego, jakie pokazaliśmy na Chrome Dev Summit, które działa tak jak w przykładzie powyżej, ten fragment może Cię zainteresować.

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

Wykrywanie funkcji pozwala też stopniowo ulepszać stronę za pomocą portali.

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

Jeśli chcesz szybko sprawdzić, jak działają portale, wypróbuj uskay-portals-demo.glitch.me. Pamiętaj, by używać go w Chrome w wersji 85 lub nowszej i włączyć flagę eksperymentalną.

1. Wpisz adres URL, którego podgląd chcesz wyświetlić.
2. Strona zostanie umieszczona jako element <portal>.
3. Kliknij podgląd.
4. Podgląd zostanie aktywowany po zakończeniu animacji.

Sprawdź specyfikację

Aktywnie rozmawiamy specyfikacji portali w Web Incubation Community Group (WICG). Aby szybko dowiedzieć się wszystkiego, kluczowych scenariuszach. Oto 3 ważne funkcje, z którymi warto się zapoznać:

• Element <portal>: sam element HTML. Interfejs API jest bardzo prosty. Składa się z atrybutu src, funkcji activate i interfejsu do przesyłania wiadomości (postMessage). Po aktywacji activate przyjmuje opcjonalny argument, aby przekazać dane do <portal>.
• Interfejs portalHost: dodaje obiekt portalHost do obiektu window. Pozwoli Ci to sprawdzić, czy strona jest umieszczona jako element <portal>. Udostępnia też interfejs przesyłania wiadomości (postMessage) do hosta.
• Interfejs PortalActivateEvent: zdarzenie wywoływane po aktywacji <portal>. Dostępna jest funkcja o nazwie adoptPredecessor, której możesz użyć do pobrania poprzedniej strony jako elementu <portal>. Pozwala to na płynną nawigację między 2 stronami.

Przyjrzyjmy się bliżej podstawowym wzorcom użytkowania. Oto niepełna lista wraz z przykładowym kodem, który można osiągnąć dzięki portalom.

Dostosuj styl, gdy jest umieszczony jako element <portal>

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

Komunikacja między elementem <portal> a 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
});

Aktywowanie elementu <portal> i odbieranie zdarzenia portalactivate

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

Pobieram poprzednią wersję

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

informację o tym, że strona została traktowana jako poprzednika

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

Połączenie wszystkich funkcji obsługiwanych przez portale możesz tworzyć bardzo atrakcyjne treści dla użytkowników. Poniższa demonstracja pokazuje na przykład, jak portale zapewniają użytkownikom wygodę. między witryną a umieszczoną na niej treścią zewnętrzną.

Przypadki użycia i plany

Mamy nadzieję, że spodobała Ci się ta krótka prezentacja portali. Nie możemy się już doczekać, żeby zobaczyć, co zaproponujesz. Na przykład warto zacząć używać portali, by ułatwić sobie nawigację, jak np. do wstępnego renderowania strony bestsellerowego produktu ze strony z informacjami o kategorii produktów.

Warto pamiętać, że portale mogą być używane do nawigacji między domenami, tak jak <iframe>. Jeśli więc masz wiele witryn, które się wzajemnie odnoszą, możesz korzystać z portali, by płynnie przechodzić między 2 różnymi stronami. Takie działanie występuje tylko w portalach i może zwiększyć wygodę użytkowników korzystających z SPA.

Czekamy na Twoją opinię

Portale można testować w Chrome 85 i nowszych wersjach. Opinie członków społeczności mają kluczowe znaczenie przy projektowaniu nowych interfejsów API, więc wypróbuj je i powiedz nam, co o nich myślisz. Jeśli chcesz poprosić o dodanie funkcji lub podzielić się opinią, przejdź do repozytorium WICG na GitHubie.