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 एपीआई की मदद से, ऐसे ऐप्लिकेशन बनाए जा सकते हैं जो किसी भाषा में बहुवचन बनाने की सुविधा को समझते हैं. इसके लिए, यह एपीआई यह बताता है कि किसी संख्या और भाषा के लिए, बहुवचन का कौनसा फ़ॉर्म लागू होता है. साथ ही, यह ऑर्डिनल नंबर के लिए भी मदद कर सकता है.

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

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