Google ने व्यू ट्रांज़िशन का इस्तेमाल करके, अपने नए एआई मोड के लिए कनेक्टेड अनुभव कैसे बनाया

Jason Michelson

Bramus

पब्लिश होने की तारीख: 28 अगस्त, 2025

Google Search का इस्तेमाल दुनिया भर में सबसे ज़्यादा किया जाता है. इसलिए, उपयोगकर्ता अनुभव में किए गए बदलावों का असर अरबों लोगों पर पड़ सकता है. हम लंबे समय से, वेब पर ऐसा अनुभव देने का सपना देख रहे थे जो ज़्यादा मॉडर्न हो और ऐप्लिकेशन जैसा लगे. एआई मोड को डेवलप करते समय, हमने अपने उपयोगकर्ताओं के लिए एक ऐसा अनुभव तैयार करने का लक्ष्य रखा था जिसमें स्टैंडर्ड खोज से एआई मोड में ट्रांज़िशन करना आसान हो और दोनों के बीच कनेक्शन बना रहे. जब हमें क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन के बारे में पता चला, तो हमें लगा कि यह सुविधा के लिए सबसे सही है. इस केस स्टडी में बताया गया है कि एआई मोड लॉन्च करने के साथ-साथ ट्रांज़िशन की सुविधा जोड़ने से हमें क्या सीखने को मिला.

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

मौजूदा स्थिति में बदलाव करना

Google Search के लिए, ब्राउज़र से जुड़ी ज़रूरी शर्तों का पालन करना ज़रूरी है. आम तौर पर, सीमित उपलब्धता सुविधा का इस्तेमाल नहीं किया जा सकता. हमने पाया कि एक से ज़्यादा दस्तावेज़ों के बीच व्यू ट्रांज़िशन के लिए, पॉलीफ़िल का इस्तेमाल नहीं किया जा सकता. इसकी मुख्य वजह यह है कि कोई पिक्सल स्नैपशॉटिंग एपीआई उपलब्ध नहीं था. साथ ही, पूरे व्यूपोर्ट को क्लोन करने से परफ़ॉर्मेंस से जुड़ी समस्याएं आ रही थीं. इसलिए, इस सुविधा को एआई मोड के साथ लॉन्च करने का सबसे अच्छा तरीका यह था कि इसे परतदार वृद्धि के तौर पर इस्तेमाल किया जाए. व्यू ट्रांज़िशन से बनाई गई ऐनिमेशन का वेबसाइट की सुविधाओं पर कोई सीधा असर नहीं पड़ता. इसलिए, जिन ट्रैफ़िक के लिए व्यू ट्रांज़िशन काम नहीं करता उनके लिए, ये ऐनिमेशन बंद कर दिए जाएंगे. हालांकि, ट्रांज़िशन ऐनिमेशन के बिना भी वेबसाइट की मौजूदा स्थिति यही है.

हमने सबसे पहले, इस प्रोग्रेसिव एनहांसमेंट रणनीति को अपने इंटरनल उपयोगकर्ताओं के साथ टेस्ट किया. इससे हमें शुरुआती सुझाव/राय मिलीं, जो काफ़ी अच्छी थीं. हमें मिली प्रतिक्रिया से, गड़बड़ियों के बारे में भी पता चला. इनमें परफ़ॉर्मेंस से जुड़ी समस्याएं और अन्य सुविधाओं के साथ अनचाहे इंटरैक्शन शामिल हैं. जैसे, ओवरलैपिंग स्टैकिंग कॉन्टेक्स्ट.

हमें यह रणनीति कारगर लगी. हमें लगता है कि आने वाले समय में, हम ब्राउज़र की अन्य नई सुविधाओं के लिए भी इसका इस्तेमाल करेंगे.

हमें क्या-क्या समस्याएं आईं और हमने उन्हें कैसे हल किया

लेटेंसी, रेंडर होने से रोकना, और वॉचडॉग टाइमर

कुल मिलाकर, एमपीए व्यू ट्रांज़िशन की वजह से होने वाली लेटेन्सी, 99% इस्तेमाल के मामलों में न के बराबर होती है. खास तौर पर, आधुनिक हार्डवेयर पर. हालांकि, Google Search में लेटेन्सी (डेटा ट्रांसफ़र में लगने वाला समय) को लेकर काफ़ी सख्त नियम हैं. साथ ही, हम ऐसे उपयोगकर्ता अनुभव बनाने की कोशिश करते हैं जो सभी डिवाइसों पर अच्छी तरह से काम करें. हमारे लिए, कुछ मिलीसेकंड भी मायने रखते हैं. इसलिए, हमें इस बात पर ध्यान देना पड़ा कि क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन को सही तरीके से कैसे लागू किया जाए, ताकि किसी भी उपयोगकर्ता के अनुभव पर कोई असर न पड़े.

रेंडर ब्लॉकिंग एक ऐसी तकनीक है जो क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन के साथ अच्छी तरह से काम करती है. आने वाले दस्तावेज़ के स्यूडो-एलिमेंट स्नैपशॉट, सिर्फ़ ऐसे कॉन्टेंट को दिखा सकते हैं जिसे पहले ही रेंडर किया जा चुका है. इसलिए, आने वाले दस्तावेज़ के कॉन्टेंट को ऐनिमेट करने के लिए, आपको उस टारगेट एलिमेंट के रेंडर होने तक ब्लॉक को रेंडर करना होगा जिसे आपको ऐनिमेट करना है. इसके लिए, HTMLLinkElement पर blocking एट्रिब्यूट का इस्तेमाल करें. रेंडरिंग को ब्लॉक करने के कुछ नुकसान भी हैं. जैसे, आने वाले दस्तावेज़ के डीओएम ट्री के आखिर में मौजूद किसी एलिमेंट के लिए इंतज़ार करने से, लेटेन्सी पर काफ़ी असर पड़ सकता है. हमें इस ट्रेडऑफ़ को बैलेंस करना पड़ा. साथ ही, पेज के लाइफ़साइकल में बहुत पहले रेंडर होने वाले एलिमेंट पर ही ब्लॉक रेंडर करना पड़ा.

<!-- Link tag in the <head> of the incoming document -->
<link blocking="render" href="#target-id" rel="expect">

<!-- Element you want to animate in the <body> of the incoming document -->
<div id="target-id">
  some content
</div>

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

इसके लिए, यह आसान तरीका अपनाएं:

function unblockRendering() {
  const renderBlockingElements = document.querySelectorAll(
    'link[blocking=render]',
  );
  for (const element of renderBlockingElements) {
    element.remove();
  }
}

const timeToUnblockRendering = t - performance.now();

if (timeToUnblockRendering > 0) {
  setTimeout(unblockRendering, timeToUnblockRendering);
} else {
  unblockRendering();
}

कवरेज से जुड़ी सीमाएं

हमें एक और समस्या का सामना करना पड़ा. दस्तावेज़ में क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन ऐट-रूल navigation: auto, ग्लोबल लेवल पर होता है. क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन को सिर्फ़ कुछ क्लिक टारगेट पर चालू करने का कोई इन-बिल्ट तरीका नहीं है. यह एक बड़ा बदलाव है. इसलिए, हम Google Search पर 100% नेविगेशन पर, एक दस्तावेज़ से दूसरे दस्तावेज़ पर ट्रांज़िशन करने की सुविधा चालू नहीं कर सके. हमें एक ऐसे तरीके की ज़रूरत थी जिससे उपयोगकर्ता जिस सुविधा का इस्तेमाल कर रहा है उसके हिसाब से, क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन को डाइनैमिक तरीके से चालू या बंद किया जा सके. हमने इन कुकी को सिर्फ़ एआई मोड में बदलाव करने के लिए चालू किया है. हमने ऐसा प्रोग्राम के हिसाब से, नेविगेशन ऐट-रूल को अपडेट करके किया. यह इस बात पर निर्भर करता है कि किस टारगेट पर क्लिक या टैप किया गया था.

व्यू ट्रांज़िशन ऐट-रूल को टॉगल करने का तरीका यहां दिया गया है:

let viewTransitionAtRule: HTMLElement | undefined;
const DISABLED_VIEW_TRANSITION = '@view-transition{navigation:none;}';
const ENABLED_VIEW_TRANSITION = '@view-transition{navigation:auto;}';

function getVtAtRule(): HTMLElement {
  if (!viewTransitionAtRule) {
    viewTransitionAtRule = document.createElement('style');
    document.head.append(viewTransitionAtRule);
  }
  return viewTransitionAtRule;
}

function disableVt() {
  getVtAtRule().textContent = DISABLED_VIEW_TRANSITION;
}

function enableVt() {
  getVtAtRule().textContent = ENABLED_VIEW_TRANSITION;
}

जंक और कंपोज़िट किए गए ऐनिमेशन

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

const pseudoElement = `::view-transition-group(${name})`;
const animation = document
  .getAnimations()
  .find(
    (animation) =>
      (animation.effect as KeyframeEffect)?.pseudoElement === pseudoElement,
  );

व्यू ट्रांज़िशन लागू किए गए: स्नैपशॉट वाले ब्लॉक से निपटना लेख में, परफ़ॉर्म करने वाले व्यू ट्रांज़िशन कीफ़्रेम लिखने के बारे में ज़्यादा पढ़ें.

इन बातों का भी ध्यान रखें

सबसे अहम समस्याओं में से एक यह है कि view-transition-name सीएसएस प्रॉपर्टी के साथ टैग किए गए एलिमेंट, स्टैकिंग कॉन्टेक्स्ट (व्यू ट्रांज़िशन स्पेसिफ़िकेशन: सेक्शन 2.1.1) पर असर डालते हैं. इस वजह से कई गड़बड़ियां हुईं. इसके लिए, कंटेनर एलिमेंट के z-index में बदलाव करना पड़ा.

एक और बात का ध्यान रखें कि हो सकता है कि आपको डिफ़ॉल्ट रूप से, एलिमेंट में view-transition-name वैल्यू न जोड़नी हो. Google Search पर कई लोग काम कर रहे हैं. हमारी टीम, एलिमेंट पर view-transition-name की जो वैल्यू सेट करती है वे अन्य टीमों के लोगों की ओर से इस्तेमाल की जाने वाली वैल्यू से मेल नहीं खाती हैं. इसलिए, हमने व्यू ट्रांज़िशन टाइप का इस्तेमाल किया है. इससे, किसी खास व्यू ट्रांज़िशन टाइप के चालू होने पर ही view-transition-name प्रॉपर्टी को जोड़ा जा सकता है.

ai-mode का व्यू ट्रांज़िशन टाइप चालू होने पर ही, किसी एलिमेंट में the-element का view-transition-name जोड़ने के लिए सीएसएस का उदाहरण:

html:active-view-transition-type(ai-mode) {
  #target {
    view-transition-name: the-element;
  }
}

सभी व्यू ट्रांज़िशन के लिए सीएसएस के ये नियम लागू करने के बाद, pageswap और pagereveal इवेंट के दौरान किसी भी नेविगेशन के लिए, मौजूदा व्यू ट्रांज़िशन टाइप को डाइनैमिक तरीके से बदला जा सकता है.

pageswap इवेंट के दौरान, व्यू ट्रांज़िशन टाइप को ai-mode पर अपडेट करने का उदाहरण.

function updateViewTransitionTypes(
  event: ViewTransitionEvent,
  types: string[],
): void {
  event.viewTransition.types.clear();
  for (const type of types) {
    event.viewTransition.types.add(type);
  }
}

window.addEventListener(
  'pageswap',
  (e) => {
    updateViewTransitionTypes(
      e as ViewTransitionEvent,
      ['ai-mode'],
    );
  }
);

इस तरह, हम नाम के टकराव को रोकते हैं. साथ ही, हम उन एलिमेंट के बेवजह स्नैपशॉट नहीं लेते जिन्हें एआई मोड में जाने और उससे बाहर आने के दौरान स्नैपशॉट करने की ज़रूरत नहीं होती.

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

::view-transition-group(the-element) {
  z-index: 100;
}

आगे क्या करना है

हम Google Search के लिए, क्रॉस-डॉक्युमेंट व्यू ट्रांज़िशन का इस्तेमाल करने का प्लान बना रहे हैं. इसमें Navigation API के साथ इंटिग्रेशन भी शामिल है. हालांकि, ऐसा तब किया जाएगा, जब यह सुविधा सभी ब्राउज़र पर उपलब्ध हो जाएगी. हमारे साथ बने रहें और देखें कि हम अगली बार कौनसी सुविधा लॉन्च करते हैं!