পোর্টালগুলির সাথে হ্যান্ডস-অন: ওয়েবে বিরামহীন নেভিগেশন

কিভাবে প্রস্তাবিত পোর্টাল API আপনার নেভিগেশন UX উন্নত করতে পারে তা জানুন।

Yusuke Utsunomiya

আপনার পৃষ্ঠাগুলি দ্রুত লোড হচ্ছে তা নিশ্চিত করা একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের মূল চাবিকাঠি। কিন্তু একটি ক্ষেত্র যা আমরা প্রায়শই উপেক্ষা করি তা হল পৃষ্ঠার রূপান্তর—আমাদের ব্যবহারকারীরা যখন পৃষ্ঠাগুলির মধ্যে স্থানান্তরিত হয় তখন তারা কী দেখতে পায়।

পোর্টাল নামে একটি নতুন ওয়েব প্ল্যাটফর্ম API প্রস্তাবের লক্ষ্য ব্যবহারকারীরা আপনার সাইট জুড়ে নেভিগেট করার সময় অভিজ্ঞতাকে স্ট্রিমলাইন করে এতে সহায়তা করা।

কর্মরত পোর্টাল দেখুন:

পোর্টালের সাথে বিরামহীন এম্বেড এবং নেভিগেশন। অ্যাডাম আর্গিল দ্বারা নির্মিত।

কি পোর্টাল সক্রিয়

একক পৃষ্ঠা অ্যাপ্লিকেশন (এসপিএ) চমৎকার ট্রানজিশন অফার করে কিন্তু নির্মাণের জন্য উচ্চতর জটিলতার খরচে আসে। মাল্টি-পেজ অ্যাপ্লিকেশানগুলি (এমপিএ) তৈরি করা অনেক সহজ, তবে আপনি পৃষ্ঠাগুলির মধ্যে ফাঁকা স্ক্রিন দিয়ে শেষ করবেন৷

পোর্টালগুলি উভয় জগতের সেরা অফার করে: একটি SPA-এর বিরামবিহীন রূপান্তর সহ একটি MPA-এর কম জটিলতা৷ তাদের একটি <iframe> এর মত মনে করুন যাতে তারা এম্বেড করার অনুমতি দেয়, কিন্তু একটি <iframe> এর বিপরীতে, তারা তাদের বিষয়বস্তুতে নেভিগেট করার জন্য বৈশিষ্ট্য সহ আসে।

দেখে বিশ্বাস হচ্ছে: অনুগ্রহ করে প্রথমে দেখুন আমরা Chrome ডেভ সামিট 2018-এ কী প্রদর্শন করেছি:

ক্লাসিক নেভিগেশনের সাথে, ব্রাউজারটি গন্তব্য রেন্ডারিং শেষ না হওয়া পর্যন্ত ব্যবহারকারীদের একটি ফাঁকা স্ক্রীন দিয়ে অপেক্ষা করতে হবে। পোর্টালগুলির সাথে, ব্যবহারকারীরা একটি অ্যানিমেশনের অভিজ্ঞতা পান, যখন <portal> সামগ্রী প্রি-রেন্ডার করে এবং একটি বিরামহীন নেভিগেশন অভিজ্ঞতা তৈরি করে।

পোর্টালের আগে, আমরা একটি <iframe> ব্যবহার করে অন্য একটি পৃষ্ঠা রেন্ডার করতে পারতাম। আমরা পৃষ্ঠার চারপাশে ফ্রেম সরানোর জন্য অ্যানিমেশন যোগ করতে পারতাম। কিন্তু একটি <iframe> আপনাকে এর সামগ্রীতে নেভিগেট করতে দেবে না। পোর্টালগুলি এই ফাঁকটি বন্ধ করে, আকর্ষণীয় ব্যবহারের ক্ষেত্রে সক্ষম করে।

পোর্টাল ব্যবহার করে দেখুন

প্রায়://পতাকাগুলির মাধ্যমে সক্ষম করা হচ্ছে৷

একটি পরীক্ষামূলক পতাকা ফ্লিপ করে Chrome 85 এবং পরবর্তী সংস্করণে পোর্টালগুলি ব্যবহার করে দেখুন:

• একই-অরিজিন নেভিগেশনের জন্য about://flags/#enable-portals পতাকা সক্ষম করুন।
• ক্রস-অরিজিন নেভিগেশন পরীক্ষা করার জন্য, এর পাশাপাশি about://flags/#enable-portals-cross-origin পতাকা সক্রিয় করুন।

পোর্টাল পরীক্ষা-নিরীক্ষার এই প্রাথমিক পর্যায়ে, আমরা --user-data-dir কমান্ড লাইন পতাকা সেট করে আপনার পরীক্ষার জন্য একটি সম্পূর্ণ আলাদা ব্যবহারকারী ডেটা ডিরেক্টরি ব্যবহার করার পরামর্শ দিই। একবার পোর্টালগুলি সক্ষম হয়ে গেলে, 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 কনসোলে এই কোডটি ব্যবহার করে দেখুন, উইকিপিডিয়া পৃষ্ঠাটি খুলতে হবে।

আপনি যদি ক্রোম ডেভ সামিট-এ দেখানো আমাদের মতো কিছু তৈরি করতে চান যা ঠিক উপরের ডেমোর মতো কাজ করে, তাহলে নিচের স্নিপেটটি আগ্রহের বিষয় হবে।

// 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. পূর্বরূপ একটি অ্যানিমেশন পরে সক্রিয় করা হবে.

বৈশিষ্ট পরীক্ষা করে দেখুন

আমরা সক্রিয়ভাবে ওয়েব ইনকিউবেশন কমিউনিটি গ্রুপে (WICG) পোর্টালের বৈশিষ্ট্য নিয়ে আলোচনা করছি। দ্রুত গতিতে উঠতে, কিছু মূল পরিস্থিতির দিকে নজর দিন৷ নিজেকে পরিচিত করার জন্য এই তিনটি গুরুত্বপূর্ণ বৈশিষ্ট্য:

• <portal> উপাদান: HTML উপাদান নিজেই। এপিআই খুবই সহজ। এটি src বৈশিষ্ট্য, activate ফাংশন এবং বার্তা প্রেরণের জন্য একটি ইন্টারফেস ( postMessage ) নিয়ে গঠিত। activate পরে <portal> এ ডেটা পাস করার জন্য activate একটি ঐচ্ছিক যুক্তি নেয়।
• portalHost ইন্টারফেস: window অবজেক্টে একটি portalHost অবজেক্ট যোগ করে। এটি আপনাকে পৃষ্ঠাটি <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 রেপোতে যান।