Chrome 55 में नया

YouTube पर देखें

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

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

नमस्ते, मैं पीट लेपेज हूं. यहां आपको Chrome 55 में डेवलपर के लिए उपलब्ध नई सुविधाओं के बारे में जानकारी दी गई है!

पॉइंटर इवेंट

वेब पर चीज़ों को पॉइंट करना पहले आसान था. आपके पास एक माउस होता था, जिसे इधर-उधर घुमाया जाता था और कभी-कभी बटन दबाए जाते थे. हालांकि, यह तरीका यहां ठीक से काम नहीं करता.

टच इवेंट अच्छे होते हैं, लेकिन टच और माउस को इस्तेमाल करने के लिए, आपको दो इवेंट मॉडल इस्तेमाल करने होंगे:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome अब PointerEvents डिस्पैच करके, एक जैसा इनपुट मैनेजमेंट चालू करता है:

elem.addEventListener('pointermove', pointerMoveEvent);

पॉइंटर इवेंट, ब्राउज़र के लिए पॉइंटर इनपुट मॉडल को एक साथ जोड़ते हैं. साथ ही, टच, पेन, और माउस को इवेंट के एक ही सेट में लाते हैं. ये IE11, Edge, Chrome, Opera, और Firefox पर काम करते हैं. हालांकि, Firefox पर ये कुछ हद तक काम करते हैं.

ज़्यादा जानकारी के लिए, आने वाले समय में होने वाले बदलावों के बारे में जानकारी देखें.

async और await

असाइनोक्रोनस JavaScript को समझना मुश्किल हो सकता है. इस फ़ंक्शन के सभी "शानदार" कॉलबैक का इस्तेमाल करें:

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

इसे promises के साथ फिर से लिखने से, नेस्टिंग की समस्या से बचा जा सकता है:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

हालांकि, अगर असाइनिमेंट के लिए एक से ज़्यादा फ़ंक्शन का इस्तेमाल किया जा रहा है, तो वादा करने वाले फ़ंक्शन के आधार पर लिखे गए कोड को पढ़ना मुश्किल हो सकता है.

Chrome अब async और await JavaScript कीवर्ड के साथ काम करता है. इससे, आपको Promise पर आधारित JavaScript लिखने में मदद मिलती है. यह कोड, सिंक्रोनस कोड की तरह ही व्यवस्थित और पढ़ने लायक होता है.

इसके बजाय, हमारे एसिंक्रोनस फ़ंक्शन को आसानी से इस तरह लिखा जा सकता है:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

जैक ने इस बारे में एक बेहतरीन पोस्ट लिखी है: एसिंक्रोनस फ़ंक्शन - प्रॉमिस को आसान बनाना. इसमें इस बारे में पूरी जानकारी दी गई है.

परसिस्टेंट स्टोरेज

पर्सिस्टेंट स्टोरेज ऑरिजिन के ट्रायल की अवधि अब खत्म हो गई है. अब वेब स्टोरेज को 'सदाबहार' के तौर पर मार्क किया जा सकता है. इससे Chrome, आपकी साइट के लिए स्टोरेज को अपने-आप मिटाने से रोका जा सकता है.

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

इसके अलावा, जिन साइटों पर ज़्यादा यूज़र ऐक्टिविटी होती है, उन्हें होम स्क्रीन पर जोड़ा जाता है या जिन पर पुश नोटिफ़िकेशन की सुविधा चालू होती है उन्हें अपने-आप अनुमति मिल जाती है.

ज़्यादा जानकारी के लिए, क्रिस विल्सन की परसिस्टेंट स्टोरेज वाली पोस्ट पढ़ें. साथ ही, अपनी साइट के लिए परसिस्टेंट स्टोरेज का अनुरोध करने का तरीका जानें.

सीएसएस में अपने-आप हाइफ़न जोड़ने की सुविधा

CSS में अपने-आप हाइफ़न जोड़ने की सुविधा, Chrome के लेआउट की सुविधाओं में से एक है. इस सुविधा के लिए अक्सर अनुरोध किया जाता है. अब यह सुविधा Android और Mac पर काम करती है.

वेब शेयर एपीआई

आखिर में, अब नए वेब शेयर एपीआई की मदद से, शेयर करने की नेटिव सुविधाओं को आसानी से चालू किया जा सकता है. यह एपीआई, ऑरिजिन के लिए ट्रायल के तौर पर उपलब्ध है. पॉल (मिस्टर वेब इंटेंट) किलन ने अपनी Navigator Share पोस्ट में इस बारे में पूरी जानकारी दी है.

आखिरी हिस्सा

डेवलपर के लिए, Chrome 55 में किए गए बदलावों में से ये सिर्फ़ कुछ हैं.

अगर आपको Chrome के बारे में अप-टू-डेट रहना है और यह जानना है कि आने वाले समय में क्या-क्या नया होने वाला है, तो सदस्यता लें. साथ ही, Chrome की टीम जिन बेहतरीन सुविधाओं पर काम कर रही है उनके बारे में ज़्यादा जानने के लिए, Chrome डेवलपर समिट के वीडियो देखना न भूलें.

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