Chrome 55 में नया

पीट लीपेज
पीट लीपेज

YouTube पर देखें

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

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

मैं हूं पीट लीपेज, डेवलपर के लिए Chrome 55 में नया क्या है!

पॉइंटर इवेंट

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

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

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

Chrome अब PointerEvents भेजकर यूनिफ़ाइड इनपुट हैंडलिंग को चालू कर देता है:

elem.addEventListener('pointermove', pointerMoveEvent);

पॉइंटर इवेंट, ब्राउज़र के पॉइंटर इनपुट मॉडल को इंटिग्रेट करता है. इससे टच, पेन, और माउस को एक साथ इवेंट के एक सेट में लाया जा सकता है. वे IE11, ED1, Chrome, Opera, और कुछ हद तक 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 कीवर्ड के साथ काम करता है. इससे आपको प्रॉमिस पर आधारित JavaScript लिखने की सुविधा मिलती है. इसे सिंक्रोनस कोड की तरह स्ट्रक्चर्ड और पढ़ा जा सकता है.

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

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

जेक का पोस्ट व्यू एक शानदार है: Async Functions - पूरे ब्यौरे के साथ, दोस्तों को समय देने के वादों को बयां करना.

स्थायी जगह

स्टोरेज के लिए, स्थायी ऑरिजिन ट्रायल अब खत्म हो गया है. अब आप वेब स्टोरेज को स्थायी के तौर पर मार्क कर सकते हैं. यह 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.");
  });
}

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

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

सीएसएस के अपने-आप होने वाले हाइफ़नेशन

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

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

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

आखिरी हिस्सा

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

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

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