عملی با پورتال ها: ناوبری یکپارچه در وب

بیاموزید که چگونه پورتال های API پیشنهادی می تواند UX ناوبری شما را بهبود بخشد.

یوسوکه اوتسونومیا
Yusuke Utsunomiya
X Homepage

اطمینان از بارگیری سریع صفحات شما، کلید ارائه یک تجربه کاربری خوب است. اما یکی از زمینه‌هایی که اغلب نادیده می‌گیریم، انتقال صفحه است - آنچه کاربران ما هنگام جابجایی بین صفحات می‌بینند.

یک پیشنهاد API پلتفرم وب جدید به نام Portals با ساده‌سازی تجربه کاربران در سرتاسر سایت شما به این امر کمک می‌کند.

پورتال ها را در عمل ببینید:

جاسازی ها و پیمایش بدون درز با پورتال ها. ایجاد شده توسط Adam Argyle .

آنچه پورتال ها فعال می کنند

برنامه های کاربردی یک صفحه (SPA) انتقال های خوبی را ارائه می دهند، اما به قیمت پیچیدگی بالاتر برای ساخت هستند. ساخت برنامه های چند صفحه ای (MPA) بسیار ساده تر است، اما در نهایت صفحه های خالی بین صفحات وجود دارد.

پورتال ها بهترین های هر دو جهان را ارائه می دهند: پیچیدگی کم MPA با انتقال یکپارچه SPA. آنها را مانند <iframe> در نظر بگیرید که اجازه جاسازی را می دهند، اما بر خلاف <iframe> ، آنها همچنین دارای ویژگی هایی برای پیمایش به محتوای خود هستند.

دیدن باور کردن است: لطفاً ابتدا آنچه را که در Chrome Dev Summit 2018 به نمایش گذاشتیم بررسی کنید:

با ناوبری های کلاسیک، کاربران باید با یک صفحه خالی منتظر بمانند تا مرورگر رندر مقصد را تمام کند. با پورتال ها، کاربران یک انیمیشن را تجربه می کنند، در حالی که <portal> محتوا را از قبل ارائه می دهد و یک تجربه ناوبری یکپارچه ایجاد می کند.

قبل از پورتال ها، می توانستیم صفحه دیگری را با استفاده از <iframe> رندر کنیم. همچنین می‌توانستیم انیمیشن‌هایی را برای جابجایی فریم در صفحه اضافه کنیم. اما یک <iframe> به شما اجازه نمی دهد در محتوای آن حرکت کنید. پورتال ها این شکاف را می بندند و موارد استفاده جالب را امکان پذیر می کنند.

پورتال ها را امتحان کنید

فعال کردن از طریق about://flags

پورتال‌ها را در Chrome 85 و نسخه‌های جدیدتر با برگرداندن یک پرچم آزمایشی امتحان کنید:

  • پرچم about://flags/#enable-portals را برای پیمایش های با مبدا یکسان فعال کنید.
  • برای آزمایش پیمایش‌های متقاطع، پرچم about://flags/#enable-portals-cross-origin نیز فعال کنید.

در طول این مرحله اولیه آزمایش Portals، ما همچنین توصیه می کنیم با تنظیم پرچم خط فرمان --user-data-dir از یک فهرست اطلاعات کاربر کاملاً مجزا برای آزمایشات خود استفاده کنید. هنگامی که پورتال ها فعال شدند، در DevTools تأیید کنید که HTMLPortalElement جدید براق دارید.

تصویری از کنسول DevTools که HTMLPortalElement را نشان می دهد

پیاده سازی پورتال ها

بیایید از طریق یک مثال پیاده سازی اساسی قدم برداریم.

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

ساده است. این کد را در کنسول DevTools امتحان کنید، صفحه ویکی پدیا باید باز شود.

یک گیف از پیش نمایش نسخه ی نمایشی به سبک پورتال

اگر می‌خواهید چیزی شبیه آنچه در Chrome Dev Summit نشان دادیم بسازید که درست مانند نسخه نمایشی بالا کار می‌کند، قطعه زیر جالب خواهد بود.

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

همچنین تشخیص ویژگی برای بهبود تدریجی وب سایت با استفاده از پورتال ها آسان است.

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

اگر می خواهید به سرعت احساس پورتال ها را تجربه کنید، از uskay-portals-demo.glitch.me استفاده کنید. مطمئن شوید که با Chrome 85 یا نسخه‌های جدیدتر به آن دسترسی دارید و پرچم آزمایشی را روشن کنید!

  1. URL مورد نظر برای پیش نمایش را وارد کنید.
  2. سپس صفحه به عنوان یک عنصر <portal> تعبیه می شود.
  3. روی پیش نمایش کلیک کنید.
  4. پیش نمایش پس از یک انیمیشن فعال می شود.

گیف استفاده از نسخه ی نمایشی glitch استفاده از پورتال

مشخصات را بررسی کنید

ما به طور فعال در حال بحث در مورد مشخصات پورتال ها در گروه انجمن انکوباسیون وب (WICG) هستیم. برای سرعت بخشیدن به سرعت، به برخی از سناریوهای کلیدی نگاهی بیندازید. این سه ویژگی مهمی است که باید با آنها آشنا شوید:

  • عنصر <portal> : خود عنصر HTML. API بسیار ساده است. این شامل ویژگی src ، تابع activate و یک رابط برای پیام رسانی ( postMessage ) است. activate یک آرگومان اختیاری برای ارسال داده به <portal> پس از فعال سازی می گیرد.
  • رابط portalHost : یک شی portalHost را به شی window اضافه می کند. این به شما امکان می دهد بررسی کنید که آیا صفحه به عنوان عنصر <portal> تعبیه شده است یا خیر. همچنین یک رابط برای ارسال پیام ( postMessage ) به میزبان فراهم می کند.
  • رابط PortalActivateEvent: رویدادی که با فعال شدن <portal> فعال می شود. یک تابع منظم به نام adoptPredecessor وجود دارد که می توانید از آن برای بازیابی صفحه قبلی به عنوان عنصر <portal> استفاده کنید. این به شما امکان می دهد تا پیمایش های یکپارچه و تجربیات ترکیبی بین دو صفحه ایجاد کنید.

بیایید فراتر از الگوی استفاده اولیه نگاه کنیم. در اینجا لیستی غیر جامع از آنچه می توانید با پورتال ها به همراه کد نمونه به دست آورید آورده شده است.

هنگامی که به عنوان عنصر <portal> تعبیه شده است، سبک را سفارشی کنید

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

ارسال پیام بین عنصر <portal> و 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
});

فعال کردن عنصر <portal> و دریافت رویداد 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;
});

بازیابی سلف

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

دانستن اینکه صفحه شما به عنوان یک سلف پذیرفته شده است

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

با ترکیب همه ویژگی های پشتیبانی شده توسط پورتال ها، می توانید تجربه های کاربری بسیار زیبایی بسازید. به عنوان مثال، نسخه ی نمایشی زیر نشان می دهد که چگونه پورتال ها می توانند یک تجربه کاربری یکپارچه را بین یک وب سایت و محتوای جاسازی شده شخص ثالث فعال کنند.

از موارد و طرح ها استفاده کنید

امیدواریم این گشت و گذار کوتاه در پورتال ها را دوست داشته باشید! ما نمی توانیم صبر کنیم تا ببینیم شما چه چیزی می توانید به دست آورید. به عنوان مثال، ممکن است بخواهید از پورتال ها برای پیمایش های غیر پیش پا افتاده استفاده کنید، مانند: پیش نمایش صفحه برای محصول پرفروش خود از صفحه فهرست بندی دسته بندی محصولات.

نکته مهم دیگری که باید بدانید این است که پورتال ها را می توان در ناوبری های متقاطع مانند <iframe> استفاده کرد. بنابراین، اگر چندین وب سایت دارید که به یکدیگر ارجاع می دهند، می توانید از پورتال ها نیز برای ایجاد ناوبری یکپارچه بین دو وب سایت مختلف استفاده کنید. این مورد استفاده متقاطع برای پورتال ها بسیار منحصر به فرد است و حتی می تواند تجربه کاربری SPA ها را بهبود بخشد.

بازخورد خوش آمدید

پورتال ها برای آزمایش در Chrome 85 و نسخه های جدیدتر آماده هستند. بازخورد انجمن برای طراحی API های جدید بسیار مهم است، بنابراین لطفاً آن را امتحان کنید و به ما بگویید که چه فکر می کنید! اگر درخواست یا بازخوردی دارید، لطفاً به مخزن WICG GitHub مراجعه کنید.