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

जानें कि सुझाए गए पोर्टल एपीआई की मदद से, नेविगेशन के लिए आपके उपयोगकर्ता अनुभव को कैसे बेहतर बनाया जा सकता है.

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 है.

पोर्टल लागू करना

आइए, इन्हें लागू करने के बुनियादी उदाहरण के बारे में जानते हैं.

// 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 का पेज खुलना चाहिए.

अगर आपको 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. ऐनिमेशन के बाद झलक चालू हो जाएगी.

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

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

• <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 पर जाएं.