Önerilen Portals API'nin gezinme kullanıcı deneyiminizi nasıl iyileştirebileceğini öğrenin.
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ı pahasına gelir. Ç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.
Bu öğeleri, yerleştirilmeye izin verdikleri için <iframe>
gibi düşünebilirsiniz. Ancak <iframe>
'lerin aksine, içeriklerine gitmenizi sağlayan özellikler de sunarlar.
Görmek inanmaktır: lütfen önce Chrome Dev Summit 2018'de sergilediğimiz özelliklere göz atın:
Klasik gezinmelerde, kullanıcıların tarayıcı hedefi oluşturmayı tamamlayana kadar boş ekranda beklemesi gerekir.
Portallar sayesinde kullanıcılar animasyon deneyimi yaşarken <portal>
içeriği önceden oluşturur ve sorunsuz bir gezinme deneyimi sunar.
Portallar'dan önce <iframe>
kullanarak başka bir sayfa oluşturabilirdik. Ayrıca, çerçeveyi sayfanın etrafında hareket ettiren 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 üzerinden 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
about://flags/#enable-portals-cross-origin
işaretini de 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ı verisi dizini kullanmanızı da öneririz.
Portallar etkinleştirildikten sonra DevTools'da yeni HTMLPortalElement
'e sahip olduğunuzu 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 DevTools konsolunda deneyin. Wikipedia sayfası açılacaktır.
Chrome Dev Summit'te gösterdiğimiz ve yukarıdaki demoyla aynı şekilde çalışan bir şey oluşturmak istiyorsanız aşağıdaki snippet'i inceleyebilirsiniz.
// 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);
Portal'ları kullanarak bir web sitesini aşamalı olarak iyileştirmek için özellik algılama yapmak da kolaydır.
if ('HTMLPortalElement' in window) {
// If this is a platform that have Portals...
const portal = document.createElement('portal');
...
}
Portal'ın nasıl bir deneyim sunduğunu hızlıca görmek istiyorsanız uskay-portals-demo.glitch.me adresini deneyin. Chrome 85 veya sonraki sürümlerle eriştiğinizden ve deneysel işaretini etkinleştirdiğinizden emin olun.
- Önizlemek istediğiniz URL'yi girin.
- Ardından sayfa,
<portal>
öğesi olarak yerleştirilir. - Önizlemeyi tıklayın.
- Önizleme, bir animasyondan sonra etkinleştirilir.
Spesifikasyona göz atın
Web Incubation Community Group (WICG)'da 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 birportalHost
nesnesi ekler. Bu sayede sayfanın<portal>
öğesi olarak yerleştirilip yerleştirilmediğini kontrol edebilirsiniz. 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ğinizadoptPredecessor
adlı kullanışlı bir işlev vardır. Bu sayede, iki sayfa arasında sorunsuz gezinmeler ve birleşik 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>
öğesini etkinleştirme ve portalactivate
etkinliğini alma
// 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 göz alıcı 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. Neler ortaya çıkaracağınızı 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. Bu nedenle, birbirine çapraz referans veren birden fazla web siteniz varsa iki farklı web sitesi arasında sorunsuz gezinmeler oluşturmak 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. Topluluğun geri bildirimleri, yeni API'lerin tasarımı için çok önemlidir. Lütfen bu özelliği deneyin ve düşüncelerinizi bizimle paylaşın. Özellik istekleriniz veya geri bildirimleriniz varsa lütfen WICG GitHub deposuna göz atın.