सभी एपीआई में उपयोगकर्ता की गतिविधि को एक जैसा बनाना

Mustaq Ahmed

Joe Medley

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

आज के प्रमुख ब्राउज़र, उपयोगकर्ता को सक्रिय करने के तरीके में व् यापक व्यवहार दिखाते हैं यह ऐक्टिवेशन-गेटेड एपीआई को कंट्रोल करता है. Chrome में, लागू करने की प्रोसेस पर आधारित होता है. यह मॉडल एक-दूसरे से मिलती-जुलती ऐक्टिवेशन-गेटेड सभी एपीआई पर व्यवहार के बारे में जानकारी देती है. उदाहरण के लिए, Chrome इसकी मदद से, ऐक्टिवेशन-गेटेड एपीआई को पूरा ऐक्सेस नहीं दिया जा सकता postMessage() और setTimeout() कॉल; और उपयोगकर्ता को ऐक्टिवेट नहीं किया गया था प्रॉमिस के साथ काम करता है, XHR, गेमपैड इंटरैक्शन वगैरह. ध्यान दें कि इनमें से कुछ लोकप्रिय होने के साथ-साथ लंबे समय से मौजूद गड़बड़ियां भी हैं.

वर्शन 72 में, Chrome ने 'यूज़र ऐक्टिवेशन' वर्शन 2 भेजा है. इससे उपयोगकर्ता ऐक्टिवेशन से जुड़े सभी एपीआई के लिए, ऐक्टिवेशन की उपलब्धता पूरी हो गई है. इससे समाधान हो जाता है कृपया कुछ अंतर देखें, जैसे कि MessageChannels), जो हमारे हिसाब से वेब को आसान बनाने में मदद करेगा उपयोगकर्ता को ऐक्टिवेट करने से जुड़े डेवलपमेंट के बारे में जानकारी. इतना ही नहीं, लागू करने का नया तरीका प्रस्तावित के लिए रेफ़रंस को लागू करने की प्रक्रिया नई जानकारी जिसका उद्देश्य लंबे समय में सभी ब्राउज़र को एक साथ लाना है.

उपयोगकर्ता ऐक्टिवेशन v2 कैसे काम करता है?

नए एपीआई के हर window ऑब्जेक्ट पर, 2-बिट की उपयोगकर्ता ऐक्टिवेशन स्थिति बनाए रखी जाती है स्टिकी बिट, जो उपयोगकर्ता के ऐक्टिवेशन की पुरानी स्थिति के हिसाब से काम करता है. फ़्रेम में कभी भी उपयोगकर्ता ने ऐक्टिवेशन देखा हो. साथ ही, मौजूदा स्थिति के लिए कोई अस्थायी बिट भी हो (अगर किसी फ़्रेम को उपयोगकर्ता इस्तेमाल के दौरान एक सेकंड के अंदर ऐक्टिवेट करता है). स्टिकी बिट फ़्रेम के सेट होने के बाद, उसके लाइफ़टाइम में कभी भी रीसेट नहीं होता. अस्थायी बिट हर उपयोगकर्ता इंटरैक्शन के लिए सेट होता है. साथ ही, समयसीमा के खत्म होने के बाद इसे रीसेट कर दिया जाता है इंटरवल (करीब एक सेकंड) या ऐक्टिवेशन इस्तेमाल करने वाले एपीआई पर कॉल करके (उदाहरण के लिए, window.open()).

ध्यान दें कि ऐक्टिवेशन से जुड़े अलग-अलग एपीआई, उपयोगकर्ता के ऐक्टिवेशन पर निर्भर करते हैं तरीके; एपीआई, एपीआई से जुड़ी इन सुविधाओं में कोई बदलाव नहीं कर रहा है. उदाहरण के लिए, हर उपयोगकर्ता के लिए, सिर्फ़ एक पॉप-अप की अनुमति है, क्योंकि window.open() का इस्तेमाल करता है पहले की तरह उपयोगकर्ता सक्रियण, Navigator.prototype.vibrate() जारी रहेगा यह असरदार तरीके से तब काम करेगा, जब किसी फ़्रेम (या उसके किसी सबफ़्रेम) में उपयोगकर्ता ने कभी कोई कार्रवाई की हो, वगैरह.

क्या बदलाव होने वाले हैं?

• यूज़र ऐक्टिवेशन वर्शन 2, उपयोगकर्ता ऐक्टिवेशन के दिखने की प्रोसेस को औपचारिक तौर पर तय करता है फ़्रेम की सीमाओं में आ जाएगा: किसी फ़्रेम के साथ उपयोगकर्ता इंटरैक्शन करने पर सभी मौजूदा फ़्रेम (और केवल उन्हीं फ़्रेम) को सक्रिय करें, चाहे उनकी ऑरिजिन. (Chrome 72 में, हमारे पास एक अस्थायी समाधान है. सभी एक ही ऑरिजिन फ़्रेम के लिए विज़िबिलिटी. हम इस वर्कअराउंड को तब हटा देंगे, जब हम करने का तरीक़ा है उपयोगकर्ता को ऐक्टिवेट करने के लिए, सब-फ़्रेम को साफ़ तौर पर पास करें.)
• जब ऐक्टिवेशन-गेटेड एपीआई को किसी ऐक्टिव फ़्रेम से कॉल किया जाता है, लेकिन इवेंट हैंडलर कोड के बाहर काम करता है, तो यह तब तक काम करता रहेगा, जब तक उपयोगकर्ता ऐक्टिव नहीं रहता. स्थिति "चालू" है (उदाहरण के लिए, न तो खत्म हो गया है और न ही इस्तेमाल किया गया है). उपयोगकर्ता से पहले एक्टिवेशन v2, यह बिना किसी शर्त के विफल हो जाएगा.
• समयसीमा खत्म होने के समय के अंतराल में, इस्तेमाल नहीं किए गए कई उपयोगकर्ता इंटरैक्शन लास्ट इंटरैक्शन के हिसाब से सिंगल ऐक्टिवेशन.

ऐक्टिवेशन-गेटेड एपीआई में एक जैसे होने के उदाहरण

यहां पॉप-अप विंडो वाले दो उदाहरण दिए गए हैं (window.open() का इस्तेमाल करके खोला गया) जो यह दिखाता है कि यूज़र ऐक्टिवेशन v2, ऐक्टिवेशन से जुड़े एपीआई को कैसे काम करता है एक जैसा.

एक के बाद एक बनाए गए setTimeout() कॉल

यह उदाहरण इनका है हमारा setTimeout() डेमो. अगर कोई click हैंडलर एक सेकंड के अंदर पॉप-अप खोलने की कोशिश करता है, तो भले ही कोड "बनाए" जाता हो या नहीं, इससे कोई फ़र्क़ नहीं पड़ता देरी हो सकती है. उपयोगकर्ता ऐक्टिवेशन v2 मिलता है इसलिए, नीचे दिया गया हर इवेंट हैंडलर किसी विंडो में एक पॉप-अप खोलता है click (100 मि॰से॰ की देरी से):

function popupAfter100ms() {
  setTimeout(callWindowOpen, 100);
}

function asyncPopupAfter100ms() {
  setTimeout(popupAfter100ms, 0);
}

someButton.addEventListener('click', popupAfter100ms);
someButton.addEventListener('click', asyncPopupAfter100ms);

उपयोगकर्ता ऐक्टिवेशन v2 के बिना, दूसरा इवेंट हैंडलर उन सभी ब्राउज़र में काम नहीं करता है जिन्हें हम परीक्षण किया गया. (पहला वाला भी फ़ेल हो जाता है कुछ मामलों में.)

क्रॉस-डोमेन postMessage() कॉल

यहां इसका एक उदाहरण दिया गया है: हमारा postMessage() डेमो. मान लीजिए कि किसी क्रॉस-ऑरिजिन सबफ़्रेम में click हैंडलर सीधे दो मैसेज भेजता है पैरंट फ़्रेम में. पैरंट फ़्रेम ऐसा होना चाहिए जिससे पॉप-अप खुल सके इनमें से कोई एक मैसेज मिल रहा हो (लेकिन दोनों नहीं):

// Parent frame code
window.addEventListener('message', e => {
  if (e.data === 'open_popup' && e.origin === child_origin)
    window.open('about:blank');
});

// Child frame code:
someButton.addEventListener('click', () => {
  parent.postMessage('hi_there', parent_origin);
  parent.postMessage('open_popup', parent_origin);
});

उपयोगकर्ता ऐक्टिवेशन वर्शन 2 के बिना, पैरंट फ़्रेम मिलने पर कोई पॉप-अप नहीं खुल सकता दूसरा मैसेज दिखता है. अगर मैसेज "चेन" से जुड़ा हो, तो पहला मैसेज भी काम करना बंद कर देता है दूसरे को क्रॉस-ऑरिजिन फ़्रेम (दूसरे शब्दों में, अगर पहला पाने वाला व्यक्ति मैसेज फ़ॉरवर्ड करता है अन्य को).

यह नीति, उपयोगकर्ता ऐक्टिवेशन वर्शन 2 के साथ काम करती है. ओरिजनल फ़ॉर्म और चेन बनाना.