Chrome 63 में नया

Pete LePage

इसके अलावा, और भी बहुत कुछ है!

मेरा नाम पीट लेपेज है. आइए, जानें कि Chrome 63 में डेवलपर के लिए क्या नया है!

क्या आपको बदलावों की पूरी सूची चाहिए? Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची देखें.

डाइनैमिक मॉड्यूल इंपोर्ट

JavaScript मॉड्यूल इंपोर्ट करना बहुत आसान है, लेकिन यह स्टैटिक होता है. रनटाइम की स्थितियों के आधार पर, मॉड्यूल इंपोर्ट नहीं किए जा सकते.

हालांकि, Chrome 63 में इसकी सुविधा बदल गई है. अब इसमें डाइनैमिक इंपोर्ट सिंटैक्स का इस्तेमाल किया जाता है. इससे रनटाइम के दौरान, मॉड्यूल और स्क्रिप्ट में कोड को डाइनैमिक तरीके से लोड किया जा सकता है. इसका इस्तेमाल, किसी स्क्रिप्ट को सिर्फ़ तब लैज़ी लोड करने के लिए किया जा सकता है, जब ज़रूरत हो. इससे आपके ऐप्लिकेशन की परफ़ॉर्मेंस बेहतर होती है.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

जब उपयोगकर्ता पहली बार आपके पेज पर आता है, तो आपका पूरा ऐप्लिकेशन लोड करने के बजाय, आप साइन इन करने के लिए ज़रूरी संसाधन हासिल कर सकते हैं. आपका शुरुआती लोड छोटा है और तेज़ी से काम करता है. इसके बाद, जब उपयोगकर्ता साइन इन कर लेता है, तो बाकी कॉन्टेंट लोड हो जाता है और आपका ऐप्लिकेशन इस्तेमाल के लिए तैयार हो जाता है.

एक साथ काम न करने वाले आइटरेटर और जनरेटर

async फ़ंक्शन के साथ किसी भी तरह का बार-बार इस्तेमाल करने वाला कोड लिखने के मामले में खराब हो सकता है. असल में, यह इंटरव्यू में कोडिंग से जुड़े मेरे पसंदीदा सवाल का मुख्य हिस्सा है.

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

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

for-of लूप में असाइनिक्स (एक साथ कई काम करने की सुविधा) वाले इटरेटर्स का इस्तेमाल किया जा सकता है. साथ ही, असाइनिक्स वाले इटरेटर्स की फ़ैक्ट्री की मदद से, अपने हिसाब से असाइनिक्स वाले इटरेटर्स बनाए जा सकते हैं.

ओवर-स्क्रोल करने की सुविधा

किसी पेज पर इंटरैक्ट करने का सबसे बुनियादी तरीका स्क्रोल करना है. हालांकि, कुछ पैटर्न को समझना मुश्किल हो सकता है. उदाहरण के लिए, ब्राउज़र में पुल करने के लिए रीफ़्रेश करें सुविधा, जहां पेज के सबसे ऊपर से नीचे की ओर स्वाइप करने पर, पेज को फिर से लोड किया जाता है.

इससे पहले, पूरा पेज रीफ़्रेश करने पर.

इसके बाद, सिर्फ़ कॉन्टेंट को रीफ़्रेश करें.

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

Chrome 63 में अब CSS overscroll-behavior प्रॉपर्टी काम करती है. इससे ब्राउज़र के डिफ़ॉल्ट ओवरफ़्लो स्क्रोल व्यवहार को आसानी से बदला जा सकता है.

इसका इस्तेमाल इन कामों के लिए किया जा सकता है:

सबसे अच्छी बात यह है कि overscroll-behavior से आपके पेज की परफ़ॉर्मेंस पर कोई बुरा असर नहीं पड़ता!

अनुमति के यूज़र इंटरफ़ेस (यूआई) में बदलाव

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

अनुमति के 90% अनुरोधों को अनदेखा कर दिया जाता है या कुछ समय के लिए ब्लॉक कर दिया जाता है.

Chrome 59 में, हमने इस समस्या को हल करना शुरू किया. इसके तहत, अगर उपयोगकर्ता ने अनुरोध को तीन बार खारिज किया, तो हमने अनुमति को कुछ समय के लिए ब्लॉक कर दिया. अब m63 में, Android के लिए Chrome, अनुमति के अनुरोधों को मॉडल डायलॉग के तौर पर दिखाएगा.

याद रखें, यह सिर्फ़ पुश नोटिफ़िकेशन के लिए नहीं है, बल्कि सभी अनुमति के अनुरोधों के लिए है. अगर आप सही समय पर और सही संदर्भ में अनुमति मांगते हैं, तो हमने देखा है कि उपयोगकर्ता, शायद ढाई गुना ज़्यादा अनुमति देते हैं!

और भी कई सुविधाएं!

डेवलपर के लिए Chrome 63 में किए गए बदलावों में से ये सिर्फ़ कुछ हैं. इसमें और भी कई बदलाव किए गए हैं.

  • finally अब Promise इंस्टेंस पर उपलब्ध है. इसे Promise के पूरा होने या अस्वीकार होने के बाद ट्रिगर किया जाता है.
  • नया डिवाइस मेमोरी JavaScript API, उपयोगकर्ता के डिवाइस में मौजूद कुल रैम के बारे में बताकर, परफ़ॉर्मेंस से जुड़ी समस्याओं को समझने में आपकी मदद करता है. रनटाइम के दौरान, अपने अनुभव को पसंद के मुताबिक बनाया जा सकता है. इससे, कम क्षमता वाले डिवाइसों पर ऐप्लिकेशन इस्तेमाल करना आसान हो जाता है. साथ ही, उपयोगकर्ताओं को बेहतर अनुभव मिलता है और उन्हें कम परेशानियों का सामना करना पड़ता है.
  • Intl.PluralRules API की मदद से, ऐसे ऐप्लिकेशन बनाए जा सकते हैं जो किसी भाषा के बहुवचन को समझने में मदद करते हैं. इसके लिए, यह जानकारी मिलती है कि दी गई संख्या और भाषा के लिए, कौनसा बहुवचन रूप लागू होता है. साथ ही, यह ऑर्डिनल नंबर के लिए भी मदद कर सकता है.

हमारे YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से इसकी सूचना मिलेगी.

मैं हूं पीट लीपेज और जैसे ही Chrome 64 रिलीज़ होगा, मैं आपको बताऊंगी कि -- Chrome में नया क्या है!