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

जानें कि प्रस्तावित पोर्टल एपीआई आपके नेविगेशन UX को कैसे बेहतर बना सकता है.

युसुके उत्सुनोमिया

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

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

पोर्टल को काम करते देखें:

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

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

पोर्टल, दोनों दुनिया की बेहतरीन सुविधाएं ऑफ़र करते हैं: एसपीए के आसान ट्रांज़िशन के साथ, एमपीए का कम जटिल होना. उन्हें ऐसे <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');
  ...
}

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

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

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