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

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

Yusuke Utsunomiya

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

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

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

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

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

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

देखना किसी बात पर भरोसा करना होता है: कृपया सबसे पहले यह देखें कि हमने Chrome डेवलपर सम्मेलन 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. ऐनिमेशन के बाद झलक चालू हो जाएगी.

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

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

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

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

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