पोर्टल के साथ बेहतर तरीके से काम करें: वेब पर आसानी से नेविगेट करें

जानें कि Portals API की मदद से, नेविगेशन के यूज़र एक्सपीरियंस को कैसे बेहतर बनाया जा सकता है.

Yusuke Utsunomiya
Yusuke Utsunomiya

उपयोगकर्ताओं को अच्छा अनुभव देने के लिए, यह पक्का करना ज़रूरी है कि आपके पेज तेज़ी से लोड हों. हालांकि, हम अक्सर पेज ट्रांज़िशन को अनदेखा कर देते हैं. यह वह चीज़ होती है जो उपयोगकर्ताओं को एक पेज से दूसरे पेज पर जाने पर दिखती है.

पोर्टल नाम के नए वेब प्लैटफ़ॉर्म एपीआई के प्रस्ताव का मकसद, उपयोगकर्ताओं को आपकी साइट पर आस-पास नेविगेट करने के अनुभव को बेहतर बनाना है.

पोर्टल को इस्तेमाल करने का तरीका देखें:

पोर्टल में आसानी से एम्बेड करने और नेविगेट करने की सुविधा. एडम अर्गल ने बनाया.

पोर्टल क्या-क्या चालू करते हैं

सिंगल पेज ऐप्लिकेशन (एसपीए), बेहतर ट्रांज़िशन उपलब्ध कराते हैं. हालांकि, इन्हें बनाने में ज़्यादा मेहनत लगती है. कई पेजों वाले ऐप्लिकेशन (एमपीए) बनाना बहुत आसान होता है. हालांकि, इनमें पेजों के बीच खाली स्क्रीन दिखती हैं.

पोर्टल, दोनों दुनिया का सबसे अच्छा ऑफ़र देते हैं: एसपीए के आसान ट्रांज़िशन के साथ एमपीए की कम जटिलता. इन्हें <iframe> की तरह ही समझें. इनमें भी एम्बेड करने की सुविधा होती है. हालांकि, <iframe> के मुकाबले इनमें अपने कॉन्टेंट पर नेविगेट करने की सुविधाएं भी होती हैं.

देखकर ही यकीन होता है: कृपया पहले देखें कि हमने Chrome Dev Summit 2018 में क्या दिखाया था:

क्लासिक नेविगेशन का इस्तेमाल करने पर, उपयोगकर्ताओं को खाली स्क्रीन पर तब तक इंतज़ार करना पड़ता है, जब तक ब्राउज़र डेस्टिनेशन को रेंडर नहीं कर देता. पोर्टल की मदद से, उपयोगकर्ताओं को ऐनिमेशन का अनुभव मिलता है. साथ ही, <portal> कॉन्टेंट को पहले से रेंडर करता है और नेविगेशन का बेहतर अनुभव देता है.

पोर्टल के आने से पहले, <iframe> का इस्तेमाल करके कोई दूसरा पेज रेंडर किया जा सकता था. हम पेज पर फ़्रेम को घुमाने के लिए ऐनिमेशन भी जोड़ सकते थे. हालांकि, <iframe> से कॉन्टेंट पर नेविगेट नहीं किया जा सकता. पोर्टल, इस अंतर को कम करते हैं और दिलचस्प इस्तेमाल के उदाहरणों को उपलब्ध कराते हैं.

पोर्टल आज़माना

about://flags से चालू करना

एक्सपेरिमेंट के तौर पर उपलब्ध फ़्लैग को चालू करके, Chrome के 85 और उसके बाद के वर्शन में पोर्टल आज़माएं:

  • एक ही ऑरिजिन के नेविगेशन के लिए about://flags/#enable-portals फ़्लैग चालू करें.
  • क्रॉस-ऑरिजिन नेविगेशन की जांच करने के लिए, about://flags/#enable-portals-cross-origin फ़्लैग को भी चालू करें.

पोर्टल के प्रयोग के शुरुआती दौर में, हमारा सुझाव है कि आप --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 कंसोल में इस कोड को आज़माएं. इससे Wikipedia का पेज खुल जाएगा.

झलक दिखाने वाले पोर्टल स्टाइल के डेमो का GIF

अगर आपको 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');
  ...
}

अगर आपको तुरंत यह अनुभव चाहिए कि Portals का इस्तेमाल कैसा होता है, तो uskay-portals-demo.glitch.me का इस्तेमाल करें. पक्का करें कि आपने इसे Chrome 85 या उसके बाद के वर्शन से ऐक्सेस किया हो. साथ ही, प्रयोग के तौर पर उपलब्ध फ़्लैग को चालू किया हो!

  1. वह यूआरएल डालें जिसकी आपको झलक देखनी है.
  2. इसके बाद, पेज को <portal> एलिमेंट के तौर पर एम्बेड कर दिया जाएगा.
  3. झलक पर क्लिक करें.
  4. ऐनिमेशन के बाद, झलक चालू हो जाएगी.

पोर्टल का इस्तेमाल करने के दौरान होने वाली गड़बड़ी का डेमो दिखाने वाला GIF

खास जानकारी देखें

हम वेब इनक्यूबेशन कम्यूनिटी ग्रुप (डब्ल्यूआईसीजी) में, पोर्टल के स्पेसिफ़िकेशन पर लगातार चर्चा कर रहे हैं. इस बारे में ज़्यादा जानने के लिए, कुछ अहम स्थितियों पर नज़र डालें. आपको इन तीन ज़रूरी सुविधाओं के बारे में जानकारी होनी चाहिए:

  • <portal> एलिमेंट: यह एचटीएमएल एलिमेंट होता है. एपीआई बहुत आसान है. इसमें src एट्रिब्यूट, activate फ़ंक्शन, और मैसेजिंग के लिए इंटरफ़ेस (postMessage) शामिल होता है. activate, चालू होने पर <portal> को डेटा भेजने के लिए, एक वैकल्पिक आर्ग्युमेंट लेता है.
  • 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
    });
  }
});

पोर्टल की सभी सुविधाओं को मिलाकर, उपयोगकर्ताओं को बेहतरीन अनुभव दिया जा सकता है. उदाहरण के लिए, नीचे दिए गए डेमो में दिखाया गया है कि पोर्टल, वेबसाइट और तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट के बीच, उपयोगकर्ता को बेहतर अनुभव कैसे दे सकते हैं.

इस्तेमाल के उदाहरण और प्लान

हमें उम्मीद है कि आपको Portals के बारे में यह छोटा सा टूर पसंद आया होगा! हमें इंतज़ार रहेगा कि अब किस तरह के वीडियो अपलोड किए जाएंगे. उदाहरण के लिए, हो सकता है कि आप पोर्टल का इस्तेमाल, सामान्य नेविगेशन के लिए करना चाहें. जैसे, प्रॉडक्ट कैटगरी के लिस्टिंग पेज से, सबसे ज़्यादा बिकने वाले प्रॉडक्ट के पेज को पहले से रेंडर करना.

एक और अहम बात यह है कि <iframe> की तरह ही, पोर्टल का इस्तेमाल क्रॉस-ऑरिजिन नेविगेशन में किया जा सकता है. इसलिए, अगर आपके पास एक-दूसरे से क्रॉस-रेफ़रंस वाली कई वेबसाइटें हैं, तो दो अलग-अलग वेबसाइटों के बीच आसानी से नेविगेट करने के लिए, पोर्टल का इस्तेमाल भी किया जा सकता है. क्रॉस-ऑरिजिन का यह इस्तेमाल का उदाहरण, पोर्टल के लिए बहुत खास है. इससे एसपीए के उपयोगकर्ता अनुभव को भी बेहतर बनाया जा सकता है.

अपने सुझाव और राय शेयर करें

Chrome 85 और उसके बाद के वर्शन में, पोर्टल को एक्सपेरिमेंट के लिए तैयार किया गया है. नए एपीआई डिज़ाइन करने के लिए, कम्यूनिटी का सुझाव, शिकायत या राय देना ज़रूरी है. इसलिए, कृपया इसे आज़माएं और हमें अपनी राय दें! अगर आपको किसी सुविधा के लिए अनुरोध करना है या कोई सुझाव/राय देनी है, तो कृपया WICG के GitHub repo पर जाएं.