Portallar ile uygulamalı: web'de sorunsuz gezinme

Önerilen Portals API'nin gezinme kullanıcı deneyiminizi nasıl iyileştirebileceğini öğrenin.

Yusuke Utsunomiya

Sayfalarınızın hızlı bir şekilde yüklenmesi, iyi bir kullanıcı deneyimi sunmanın anahtarıdır. Ancak genellikle göz ardı ettiğimiz bir alan da sayfa geçişleridir. Kullanıcılarımız sayfalar arasında geçiş yaparken ne görür?

Portallar adlı yeni bir web platformu API önerisi, kullanıcılar sitenizde gezinirken deneyimi kolaylaştırarak bu konuda yardımcı olmayı amaçlamaktadır.

Portal'ın işleyiş şeklini görün:

Portallar neleri sağlar?

Tek sayfalık uygulamalar (SPA'lar) güzel geçişler sunar ancak geliştirmenin daha karmaşık olması dezavantajıdır. Çok sayfalı uygulamaların (MPA'lar) oluşturulması çok daha kolaydır ancak sayfalar arasında boş ekranlar oluşur.

Portallar, her iki dünyanın da en iyisini sunar: MPA'nın düşük karmaşıklığı ve SPA'nın sorunsuz geçişleri. Bunları, yerleştirmeye olanak sağladığı için <iframe> gibi düşünebilirsiniz, ancak <iframe>'in aksine içeriklerine gitmek için kullanabileceğiniz özellikler de vardır.

Görmek inanmaktır: lütfen önce Chrome Dev Summit 2018'de sergilediğimiz özelliklere göz atın:

Klasik gezinmelerde kullanıcılar, tarayıcı hedefi oluşturmayı tamamlayana kadar boş bir ekranla beklemek zorundadır. Portallar sayesinde, kullanıcılar bir animasyonla karşılaşırken <portal>, içeriği önceden oluşturur ve sorunsuz bir gezinme deneyimi oluşturur.

Portallar'dan önce <iframe> kullanarak başka bir sayfa oluşturabilirdik. Çerçeveyi sayfada hareket ettirmek için animasyonlar da ekleyebilirdik. Ancak <iframe>, içeriğine gitmenize izin vermez. Portallar bu boşluğu doldurarak ilginç kullanım alanları sağlar.

Portalları deneyin

about://flags aracılığıyla etkinleştirme

Deneysel bir işareti etkinleştirerek Chrome 85 ve sonraki sürümlerde Portal'ı deneyin:

• Aynı kaynaktan gezinmeler için about://flags/#enable-portals işaretini etkinleştirin.
• Kaynaklar arası gezinmeleri test etmek için ayrıca about://flags/#enable-portals-cross-origin işaretini etkinleştirin.

Portallar denemesinin bu ilk aşamasında, --user-data-dir komut satırı işaretini ayarlayarak testleriniz için tamamen ayrı bir kullanıcı verileri dizini kullanmanızı da öneririz. Portallar etkinleştirildikten sonra Geliştirici Araçları'nda yeni göz alıcı HTMLPortalElement olduğunu onaylayın.

Portalları uygulama

Temel bir uygulama örneğini inceleyelim.

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

Bu kadar basit. Bu kodu Geliştirici Araçları konsolunda deneyin. Wikipedia sayfası açılacaktır.

Chrome Geliştirici Zirvesi'nde gösterdiğimiz ve yukarıdaki demoda olduğu gibi çalışan bir uygulama geliştirmek istiyorsanız aşağıdaki snippet'i kullanabilirsiniz.

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

Ayrıca, Portallar'ı kullanarak bir web sitesini kademeli olarak geliştirmek için özellik algılaması da kolaydır.

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

Portalların atmosferini hızlı bir şekilde keşfetmek istiyorsanız uskay-portals-demo.glitch.me adresini kullanmayı deneyin. Chrome 85 veya sonraki sürümlerle eriştiğinizden ve deneysel işaretini etkinleştirdiğinizden emin olun.

1. Önizlemek istediğiniz URL'yi girin.
2. Sayfa, <portal> öğesi olarak yerleştirilir.
3. Önizlemeyi tıklayın.
4. Önizleme, bir animasyondan sonra etkinleştirilir.

Spesifikasyona göz atın

Web Incubation Community Group'ta (WICG) Portallar spesifikasyonunu aktif olarak tartışıyoruz. Hızlıca bilgi edinmek için önemli senaryolardan bazılarına göz atın. Aşina olmanız gereken üç önemli özellik şunlardır:

• <portal> öğesi: HTML öğesinin kendisidir. API çok basittir. src özelliği, activate işlevi ve mesajlaşma arayüzünden (postMessage) oluşur. activate, etkinleştirildiğinde <portal>'a veri aktarmak için isteğe bağlı bir bağımsız değişken alır.
• portalHost arayüzü: window nesnesine bir portalHost nesnesi ekler. Bu, sayfanın bir <portal> öğesi olarak yerleştirilmiş olup olmadığını kontrol etmenizi sağlar. Ayrıca, barındırıcıya mesaj göndermek (postMessage) için bir arayüz sağlar.
• PortalActivateEvent arayüzü: <portal> etkinleştirildiğinde tetiklenen bir etkinlik. Önceki sayfayı <portal> öğesi olarak almak için kullanabileceğiniz adoptPredecessor adlı kullanışlı bir işlev vardır. Bu sayede iki sayfa arasında sorunsuz gezinme ve oluşturulan deneyimler oluşturabilirsiniz.

Temel kullanım kalıbının ötesine bakalım. Portal'larla neler yapabileceğinizin kapsamlı olmayan bir listesini ve örnek kodu aşağıda bulabilirsiniz.

<portal> öğesi olarak yerleştirildiğinde stili özelleştirme

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

<portal> öğesi ile portalHost arasında mesajlaşma

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

<portal> öğesi etkinleştiriliyor ve portalactivate etkinliği alınıyor

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

Önceki öğeyi alma

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

Sayfanızın öncü olarak benimsendiğini bilme

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

Portal'lar tarafından desteklenen tüm özellikleri birleştirerek gerçekten etkileyici kullanıcı deneyimleri oluşturabilirsiniz. Örneğin, aşağıdaki demoda portalların bir web sitesi ile üçüncü taraf yerleşik içerik arasında nasıl sorunsuz bir kullanıcı deneyimi sağlayabileceği gösterilmektedir.

Kullanım alanları ve planlar

Portallar ile ilgili bu kısa turdan memnun kaldığınızı umuyoruz. Nasıl bir proje hazırlayabileceğinizi görmek için sabırsızlanıyoruz. Örneğin, ürün kategorisi girişi sayfasından en çok satan ürününüzün sayfasını önceden oluşturma gibi basit olmayan gezinmeler için portalları kullanmaya başlayabilirsiniz.

Bilmeniz gereken bir diğer önemli nokta da portalların, <iframe> gibi kaynakta geçişlerde kullanılabilmesidir. Dolayısıyla, birbirine çapraz referans veren birden fazla web siteniz varsa, iki farklı web sitesi arasında sorunsuz gezinme sağlamak için Portalları da kullanabilirsiniz. Kaynaklar arası bu kullanım alanı, portallara özgüdür ve SPA'ların kullanıcı deneyimini bile iyileştirebilir.

Geri bildirimlerinize önem veriyoruz

Portallar, Chrome 85 ve sonraki sürümlerde denemeye hazırdır. Topluluktan gelen geri bildirimler, yeni API'lerin tasarımı için büyük önem taşır. Bu nedenle lütfen deneyin ve düşüncelerinizi bizimle paylaşın. Özellik istekleriniz veya geri bildirimleriniz varsa lütfen WICG GitHub deposuna gidin.