आप और आपके उपयोगकर्ता, ऐसे मोबाइल वेब ऐप्लिकेशन चाहते हैं जो टच करने पर तुरंत काम करें और आसानी से स्क्रोल किए जा सकें. इन्हें डेवलप करना आसान होना चाहिए. हालांकि, माफ़ करें, स्क्रॉल करने के दौरान मोबाइल वेब ब्राउज़र, टच इवेंट पर कैसे प्रतिक्रिया देते हैं, यह जानकारी TouchEvent स्पेसिफ़िकेशन में दी गई है. इसलिए, इन तरीकों को चार कैटगरी में बांटा जा सकता है. इस स्थिति से, स्क्रोल को आसानी से करने और डेवलपर के कंट्रोल को बनाए रखने के बीच एक बुनियादी समस्या का पता चलता है.
टच इवेंट प्रोसेसिंग के चार अलग-अलग मॉडल?
ब्राउज़र के बीच व्यवहार में अंतर को चार मॉडल में बांटा गया है.
सिंक्रोनस इवेंट की सामान्य प्रोसेसिंग
टचमूव इवेंट, स्क्रोल करने के दौरान भेजे जाते हैं. साथ ही, हर स्क्रोल अपडेट तब तक ब्लॉक रहता है, जब तक टचमूव को हैंडल करने की प्रोसेस पूरी नहीं हो जाती. यह सबसे आसान और सबसे बेहतर तरीका है. हालांकि, स्क्रोल की परफ़ॉर्मेंस के लिए यह अच्छा नहीं है. इसकी वजह यह है कि स्क्रोल के दौरान हर फ़्रेम को मुख्य थ्रेड पर ब्लॉक करना ज़रूरी है.
ब्राउज़र: Android Browser (Android 4.0.4, 4.3), Mobile Safari (जब डिव स्क्रोल किया जा रहा हो)
एसिंक्रोनस टचमूव प्रोसेसिंग
स्क्रोल करने के दौरान, टचमूव इवेंट भेजे जाते हैं. हालांकि, स्क्रोल करने की प्रोसेस असिंक्रोनस तरीके से आगे बढ़ सकती है. स्क्रोल शुरू होने के बाद, टचमूव इवेंट को अनदेखा कर दिया जाता है. इस वजह से, इवेंट को "दो बार हैंडल" किया जा सकता है. उदाहरण के लिए, वेबसाइट के touchmove इवेंट के साथ कुछ करने और इवेंट पर preventDefault को कॉल करने के बाद भी स्क्रोल करना जारी रखना. इससे ब्राउज़र को यह मैसेज मिलता है कि इवेंट को हैंडल न करें.
ब्राउज़र: Mobile Safari (दस्तावेज़ को स्क्रोल करते समय), Firefox
स्क्रोल करते समय टचमूव की सुविधा बंद होना
स्क्रोल शुरू होने के बाद, टचमूव इवेंट नहीं भेजे जाते. साथ ही, टचएंड इवेंट के बाद ही इन्हें फिर से शुरू किया जाता है. इस मॉडल में, स्टेशनरी टच और स्क्रोल के बीच का अंतर बताना मुश्किल है.
ब्राउज़र: Samsung Browser (mousemove इवेंट भेजे गए)
स्क्रोल शुरू होने पर टचकैंसल
स्मूद स्क्रॉल और डेवलपर कंट्रोल, दोनों एक साथ नहीं हो सकते. यह मॉडल, स्मूद स्क्रॉल और इवेंट हैंडल करने के बीच के समझौते को साफ़ तौर पर दिखाता है. यह पॉइंटर इवेंट स्पेसिफ़िकेशन के सेमेटिक्स की तरह ही है. कुछ सुविधाएं काम नहीं करेंगी. जैसे, पुल-टू-रीफ़्रेश. ऐसा इसलिए, क्योंकि इन सुविधाओं के लिए उंगली को ट्रैक करना ज़रूरी होता है.
ब्राउज़र: Chrome Desktop M32+, Chrome Android
बदलाव क्यों करना है?
फ़िलहाल, Android के लिए Chrome, Chrome के पुराने मॉडल का इस्तेमाल करता है: स्क्रोल शुरू करने पर touchcancel. इससे स्क्रोल करने की परफ़ॉर्मेंस बेहतर होती है, लेकिन डेवलपर को भ्रम होता है. खास तौर पर, कुछ डेवलपर को touchcancel इवेंट या इससे जुड़ी समस्या को हल करने का तरीका नहीं पता है. इस वजह से, कुछ वेबसाइटें ठीक से काम नहीं कर रही हैं. सबसे अहम बात यह है कि पुल-टू-रिफ़्रेश, छिपे हुए बार, और स्नैप पॉइंट जैसे यूज़र इंटरफ़ेस (यूआई) स्क्रोलिंग इफ़ेक्ट और व्यवहारों की पूरी क्लास को सही तरीके से लागू करना मुश्किल या असंभव है.
इन इफ़ेक्ट के साथ काम करने के लिए, खास तौर पर हार्डकोड की गई सुविधाएं जोड़ने के बजाय, Chrome का मकसद ऐसे प्लैटफ़ॉर्म प्राइमिटिव जोड़ना है जिनकी मदद से डेवलपर, इन इफ़ेक्ट को सीधे लागू कर सकें. इस फ़िलॉज़ोफ़ी के बारे में सामान्य जानकारी के लिए, A Rational Web Platform देखें.
Chrome का नया मॉडल: थ्रॉटल किया गया असाइनिक टचमूव मॉडल
Chrome में नया तरीका आ रहा है. इसे स्क्रीन पर स्क्रोल करते समय, दूसरे ब्राउज़र के लिए लिखे गए कोड के साथ काम करने की सुविधा को बेहतर बनाने के लिए डिज़ाइन किया गया है. साथ ही, यह उन अन्य स्थितियों को भी चालू करता है जो स्क्रोल करते समय टचमूव इवेंट पाने पर निर्भर करती हैं. यह सुविधा डिफ़ॉल्ट रूप से चालू रहती है. इसे chrome://flags\#touch-scrolling-mode फ़्लैग की मदद से बंद किया जा सकता है.
नया व्यवहार:
- स्क्रोल को रद्द करने के लिए, पहले टचमूव को एक साथ भेजा जाता है
- स्क्रोल करने के दौरान
- touchmove इवेंट एसिंक्रोनस तरीके से भेजे जाते हैं
- हर 200 मिलीसेकंड में एक इवेंट के लिए थ्रॉटल किया गया या सीएसएस के 15 पिक्सल स्लोप क्षेत्र से ज़्यादा हो गया
- Event.cancelable false है
- अगर ऐसा नहीं होता है, तो सक्रिय स्क्रॉलिंग के खत्म होने या स्क्रॉल की सीमा पूरी होने की वजह से, टचमूव इवेंट सामान्य तौर पर सिंक होकर फ़ायर होते हैं
- जब उपयोगकर्ता अपनी उंगली हटाता है, तो touchend इवेंट हमेशा ट्रिगर होता है
Android के लिए Chrome में इस डेमो को आज़माएं और अंतर देखने के लिए, chrome://flags\#touch-scrolling-mode फ़्लैग को टॉगल करें.
हमें आपकी राय का इंतज़ार है
असाइन किए गए समय के हिसाब से टचमोव मॉडल, अलग-अलग ब्राउज़र के साथ काम करने की सुविधा को बेहतर बना सकता है. साथ ही, टच जेस्चर इफ़ेक्ट की नई क्लास को चालू कर सकता है. हमें यह जानने में दिलचस्पी है कि डेवलपर इस सुविधा के बारे में क्या सोचते हैं. साथ ही, यह भी देखना है कि इस सुविधा का इस्तेमाल करके, क्रिएटिव तरीके से क्या-क्या किया जा सकता है.