Chrome 63 में नया

पीट लीपेज
पीट लीपेज
Twitter GitHub Glitch Mastodon होम पेज

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

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

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

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

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

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

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

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

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

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

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

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 में अब सीएसएस overscroll-behavior प्रॉपर्टी का इस्तेमाल किया जा सकता है. इससे ब्राउज़र के डिफ़ॉल्ट ओवरफ़्लो स्क्रोल व्यवहार को बदलना आसान हो जाता है.

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

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

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

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

अनुमति के सभी अनुरोधों में से 90% अनुरोधों को अनदेखा कर दिया जाता है या उन पर कुछ समय के लिए रोक लगाई जाती है.

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

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

और ज़्यादा!

डेवलपर के लिए Chrome 63 में किए गए ये कुछ बदलाव हैं, बेशक, और भी बहुत से बदलाव हैं.

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

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

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