अलग-अलग सेक्शन में बंटे पॉपिन: डेवलपर के लिए उपलब्ध ट्रायल वर्शन में, वेब पॉप-अप के लिए नया तरीका

Natalia Markoborodova

Chrome 132 से, डेवलपर वेब पॉप-अप के लिए नए तरीके के डेवलपर ट्रायल में हिस्सा ले सकते हैं: Partitioned Popins. डेवलपर के लिए यह ट्रायल सिर्फ़ डेस्कटॉप के लिए उपलब्ध है. यह सुविधा फ़िलहाल Android पर उपलब्ध नहीं है.

अलग-अलग हिस्सों में बंटे पॉप-अप, एक तरह का नया पॉप-अप है. इसे कम समय के इंटरैक्शन के लिए डिज़ाइन किया गया है. जैसे, लॉगिन या तुरंत पुष्टि करना. यह वेब कॉन्टेंट को दो खास सुविधाओं के साथ लोड करता है:

• स्टोरेज को खोलने वाले के हिसाब से बांटा गया
• मॉडल जैसा यूज़र इंटरफ़ेस (यूआई)

ध्यान दें: पार्टिशन किए गए पॉपिन को खोलने वाला वेब पेज, वह वेब पेज होता है जिस पर पॉपिन खोला गया था.

हमें अलग-अलग सेक्शन वाले पॉप-इन की ज़रूरत क्यों है?

अलग-अलग हिस्सों में बंटे पॉप-इन को, अलग-अलग हिस्सों में बंटे iframe की निजता प्रॉपर्टी और पॉप-अप की सुरक्षा प्रॉपर्टी को बनाए रखने के लिए डिज़ाइन किया गया है.

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

अलग-अलग सेक्शन वाले पॉप-इन कैसे काम करते हैं?

हर पार्टीशन वाले पॉपिन का स्टोरेज, उसे खोलने वाले उपयोगकर्ता के हिसाब से बांटा जाता है. स्टोरेज को अलग-अलग हिस्सों में बांटने से, क्रॉस-साइट डेटा के ऐक्सेस पर पाबंदी लगती है. इससे ट्रैकिंग के जोखिम और स्क्रिप्ट इंजेक्शन अटैक को कम करने में मदद मिलती है. स्टोरेज को अलग-अलग हिस्सों में बांटने के तरीके के बारे में जानने के लिए, हमारे दस्तावेज़ पढ़ें.

opener.example वेबसाइट पर third-party.example का कॉन्टेंट एम्बेड किया गया है. opener.example पर उपयोगकर्ता के हिसाब से कॉन्टेंट दिखाने के लिए, उपयोगकर्ता को third-party.example पर साइन इन करना होगा. जब उपयोगकर्ता के ब्राउज़र में तीसरे पक्ष की कुकी ब्लॉक होती हैं, तो मौजूदा पॉप-अप फ़्लो इस तरह का होता है:

1. उपयोगकर्ता, लॉगिन बटन पर क्लिक करता है.
2. एक डायलॉग बॉक्स खुलेगा.
3. उपयोगकर्ता, third-party.example के टॉप लेवल कॉन्टेक्स्ट से लॉग इन करता है और पुष्टि करने वाली ऐसी कुकी लिखी जाती है जिसे बांटा नहीं गया है.
4. opener.example पर एम्बेड किए गए third-party.example कॉन्टेंट के पास, third-party.example पर लिखी गई अपनी टॉप-लेवल कुकी का ऐक्सेस नहीं होता. ऐसा तब होता है, जब कॉन्टेंट को पहले पक्ष के संदर्भ में दिखाया गया हो. ऐसा इसलिए होता है, क्योंकि पुष्टि करने वाली कुकी को अलग-अलग हिस्सों में नहीं बांटा जाता. इसलिए, यह तीसरे पक्ष की कुकी होती है.

पॉप-अप फ़्लो: opener.example पर एम्बेड किए गए third-party.example iframe के पास, third-party.example पॉप-अप के टॉप-लेवल कॉन्टेक्स्ट में मौजूद, बिना बंटवारे वाली कुकी सेट का ऐक्सेस नहीं होता.

पार्टीशन किए गए पॉपिन का स्टोरेज, उसे खोलने वाले के लिए पार्टीशन किया जाता है. इससे फ़्लो के तीसरे और चौथे चरण में बदलाव होता है:

1. उपयोगकर्ता, third-party.example के टॉप-लेवल कॉन्टेक्स्ट से लॉग इन करता है. यह opener.example के हिसाब से, पार्टिशन वाले पॉपिन में खुलता है.

   ध्यान दें: अगर तीसरे पक्ष की कुकी ब्लॉक की जाती हैं, तो पॉप-इन, टॉप-लेवल कॉन्टेक्स्ट में सेट की गई कुकी ऐक्सेस नहीं कर सकते. हमारे उदाहरण में, third-party.example को अलग ब्राउज़र विंडो में खोलने पर सेट की गई कुकी, third-party.example पॉप-इन या iframe में उपलब्ध नहीं होती हैं.

2. opener.example पर एम्बेड किए गए third-party.example कॉन्टेंट के पास, पॉप-इन में सेट की गई अपनी कुकी का ऐक्सेस होता है. ऐसा इसलिए होता है, क्योंकि दोनों एक ही सेक्शन वाले स्टोरेज को शेयर करते हैं.

पार्टिशन किए गए पॉपिन का फ़्लो: opener.example पर एम्बेड किए गए third-party.example iframe के पास, third-party.example पॉपिन के टॉप-लेवल कॉन्टेक्स्ट में, पार्टिशन की गई अपनी कुकी सेट का ऐक्सेस होता है. ऐसा इसलिए होता है, क्योंकि कुकी को opener.example के हिसाब से पार्टिशन किया जाता है.

जिस टैब से लिंक खोला गया है उसके हिसाब से, मॉडल जैसा यूज़र इंटरफ़ेस

अलग-अलग हिस्सों में बंटे पॉपिन का मकसद, उपयोगकर्ता को यह समझने में मदद करना है कि पॉपिन और ओपनर एक-दूसरे से जुड़े हैं:

• जब उपयोगकर्ता किसी दूसरे टैब पर स्विच करता है, तो पॉप-इन अपने-आप अदृश्य हो जाता है और उस पर ऐक्सेस नहीं किया जा सकता. ठीक उसी तरह, कोई मॉडल सिर्फ़ तब दिखता है, जब उसे खोलने वाला टैब चालू हो.
• जब उपयोगकर्ता उस टैब पर वापस आता है जिससे वह विज्ञापन पर पहुंचा था, तो पॉप-इन फिर से दिखता है.
• उपयोगकर्ता, पॉपिन के ब्राउज़र के पता बार में बदलाव नहीं कर सकता.

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

पार्टिशन वाले पॉप-इन की मदद से स्टोरेज का बंटवारा: ओपनर पेज पर एम्बेड किया गया iframe, पॉप-इन में सेट किया गया स्टोरेज ऐक्सेस कर सकता है.

इसे आज़माएं

Chrome 132 में, अलग-अलग सेक्शन में बंटे पॉप-इन की सुविधा के लिए, डेवलपर ट्रायल उपलब्ध कराया जा रहा है. इसका मतलब है कि यह सुविधा, फ़्लैग के पीछे उपलब्ध होगी. यहां बताया गया है कि अलग-अलग हिस्सों में बंटे पॉपिन को कैसे आज़माया जा सकता है:

1. पक्का करें कि आपने Chrome 132 या उसके बाद के वर्शन का इस्तेमाल किया हो.
2. chrome://flags#partitioned-popins पर जाएं और फ़ीचर फ़्लैग को चालू करें.
3. Chrome को रीस्टार्ट करें.
4. हमारा डेमो आज़माएं.

अपनी वेबसाइट पर, अलग-अलग सेक्शन वाले पॉपिन का इस्तेमाल करना

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

अपनी वेबसाइट पर, अलग-अलग सेक्शन वाले पॉपिन का इस्तेमाल करने के लिए, popin पैरामीटर के साथ window.open() तरीके को कॉल करें:

window.open("third-party-popin.example", "_blank", "popin");

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

सुझाव/राय दें या शिकायत करें

हम अलग-अलग सेक्शन वाले पॉप-इन की सुविधा पर काम कर रहे हैं. साथ ही, डेवलपर से इस बारे में सुझाव और राय चाहते हैं. यहां इस्तेमाल के कुछ संभावित उदाहरण दिए गए हैं:

• उपयोगकर्ता की पुष्टि करने की प्रोसेस. अगर आपने पुष्टि करने का कस्टम फ़्लो लागू किया है और पुष्टि आपकी साइट के बजाय किसी दूसरे डोमेन पर होती है (उदाहरण के लिए, site.example उपयोगकर्ता auth-site.example पर साइन इन करते हैं), तो पुष्टि करने वाले पेज को पॉप-इन में खोलें. इससे, ओपनर पेज पर सेशन कुकी का इस्तेमाल किया जा सकेगा.
• एम्बेड किया गया कॉन्टेंट. तीसरे पक्ष के विजेट से ज़्यादा कॉन्टेंट दिखाने के लिए, अलग-अलग हिस्सों में बंटे पॉप-इन आज़माएं. जैसे, सेटिंग डायलॉग, इमेज या PDF (या ऐसा अन्य कॉन्टेंट जो आम तौर पर पॉप-अप में लोड होता है). यह कॉन्टेंट बड़ी विंडो में रेंडर किया जाता है. इस मामले में, अलग-अलग हिस्सों में बंटे पॉपिन का मकसद, तीसरे पक्ष के विजेट और आपकी साइट के बीच उपयोगकर्ता के सेशन की स्थिति को बनाए रखना है.

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

• क्या आपको कोई समस्या हुई?
• क्या आपके पास उपयोगकर्ता अनुभव को बेहतर बनाने के लिए कोई सुझाव है?
• क्या आपके पास यूज़र इंटरफ़ेस (यूआई) को बेहतर बनाने के लिए कोई सुझाव है? खास तौर पर, क्या आपको लगता है कि यूज़र इंटरफ़ेस (यूआई) से साफ़ तौर पर पता चलता है कि ओपनर और पॉप-इन एक-दूसरे से जुड़े हैं?
• आपको यह सुविधा कितनी काम की लगी?
• क्या आपको पॉपिन के अलग-अलग सेक्शन बनाने के लिए, इस्तेमाल के अन्य उदाहरणों का इस्तेमाल करना है?

अपने विचार शेयर करने के लिए, GitHub पर समस्या दर्ज करें.