इस पेज का अनुवाद Cloud Translation API से किया गया है.

Chrome 79 में नया

पीट लीपेज

Twitter GitHub Glitch Mastodon होम पेज

Chrome 79 अब रोल आउट किया जा रहा है!

Android पर इंस्टॉल किए गए प्रोग्रेसिव वेब ऐप्लिकेशन में, अब मास्केबल आइकॉन की सुविधा काम करती है.
अब WebXR Device API की मदद से, वीडियो को बेहतरीन अनुभव दिया जा सकता है.
वेक लॉक एपीआई, ऑरिजिन ट्रायल के तौर पर उपलब्ध है.
rendersubtree एट्रिब्यूट, ऑरिजिन ट्रायल के तौर पर उपलब्ध है.
Chrome DevSummit के वीडियो अब ऑनलाइन हैं.
और भी बहुत कुछ.

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

मास्क किए जा सकने वाले आइकॉन

अगर आपके डिवाइस में Android O या इसके बाद वाला वर्शन इस्तेमाल किया जा रहा है और आपने प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल किया है, तो शायद आपको आइकॉन के आस-पास, परेशान करने वाला सफ़ेद गोला दिखेगा.

अच्छी बात यह है कि Chrome 79 पर, अब इंस्टॉल किए गए प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, मास्क किए जा सकने वाले आइकॉन काम करते हैं. आपको अपने आइकॉन को सेफ़ ज़ोन में फ़िट करने के लिए डिज़ाइन करना होगा. आइकॉन का व्यास ऐसे सर्कल में होना चाहिए जो कैनवस का 80% हो.

इसके बाद, वेब ऐप्लिकेशन मेनिफ़ेस्ट में आपको आइकॉन में नई purpose प्रॉपर्टी जोड़नी होगी और उसकी वैल्यू को maskable पर सेट करना होगा.

{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

टाइगर ओक्स ने सीएसएस ट्रिक्स - मास्केबल आइकॉन: Android के हिसाब से आइकॉन: आपके PWA के लिए आइकॉन में पूरी जानकारी दी है. इस पर एक बेहतरीन पोस्ट है. इसका इस्तेमाल करके, अपने आइकॉन की जांच की जा सकती है, ताकि यह पक्का किया जा सके कि वे सही तरीके से फ़िट हो जाएं.

वेब एक्सआर

अब WebXR Device API की मदद से, स्मार्टफ़ोन और सिर पर पहनने वाले डिसप्ले के लिए शानदार अनुभव दिया जा सकता है.

WebXR पर आपको कई तरह के अनुभव मिलते हैं. ऑगमेंटेड रिएलिटी (एआर) का इस्तेमाल करने से लेकर, वर्चुअल रिएलिटी गेम और 360 डिग्री वाली मूवी वगैरह खरीदने से पहले, यह देखना कि आपके घर में नया सोफ़ा कैसा दिखेगा.

एपीआई के नए वर्शन का इस्तेमाल शुरू करने के लिए, वर्चुअल रिएलिटी के वेब पर उपलब्ध होना लेख पढ़ें.

नए ऑरिजिन ट्रायल

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

एक्सपेरिमेंट के तौर पर उपलब्ध सुविधाएं, आम तौर पर फ़्लैग के साथ ही उपलब्ध होती हैं. हालांकि, जब हम किसी सुविधा के लिए ऑरिजिन ट्रायल ऑफ़र करते हैं, तो उस ऑरिजिन ट्रायल के लिए रजिस्टर किया जा सकता है. इससे, उस सुविधा को अपने ऑरिजिन के सभी उपयोगकर्ताओं के लिए चालू किया जा सकता है.

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

वेब डेवलपर के लिए, ऑरिजिन ट्रायल गाइड में, ऑरिजिन ट्रायल के बारे में ज़्यादा जानकारी दी गई है. आपके पास चालू ऑरिजिन ट्रायल की सूची देखने और Chrome ऑरिजिन ट्रायल पेज पर जाकर, साइन अप करने का विकल्प है.

वेक लॉक

Google Slides के बारे में मुझे सबसे बड़ी बात यह लगती है कि अगर आप डेक को बहुत देर के लिए एक स्लाइड पर खुला छोड़ देते हैं, तो स्क्रीन सेवर चालू हो जाता है. जारी रखने से पहले, आपको अपना कंप्यूटर अनलॉक करना होगा. ओह.

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

वेक लॉक का अनुरोध करने के लिए, आपको navigator.wakeLock.request() को कॉल करना होगा. इसके बाद, उस WakeLockSentinel ऑब्जेक्ट को सेव करना होगा जो इससे मिलने वाला है.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

तब तक लॉक रहेगा, जब तक उपयोगकर्ता पेज से दूर नहीं जाता या फिर आपने उस WakeLockSentinel ऑब्जेक्ट पर release को कॉल नहीं किया जिसे आपने पहले सेव किया था.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

ज़्यादा जानकारी के लिए web.dev/wakelock पर जाएं.

`rendersubtree` एट्रिब्यूट

कई बार आपको DOM के कुछ हिस्से को तुरंत रेंडर नहीं करना होता. उदाहरण के लिए, ऐसे स्क्रोलर जिनमें ज़्यादा कॉन्टेंट हो या टैब वाले यूज़र इंटरफ़ेस (यूआई) हों, जिनमें किसी भी समय कुछ ही कॉन्टेंट दिखता हो.

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

जब rendersubtree को invisible पर सेट किया जाता है, तो एलिमेंट का कॉन्टेंट न तो बनाया जाता है और न ही हिट-टेस्ट किया जाता है. इससे रेंडरिंग को ऑप्टिमाइज़ करने में मदद मिलती है.

rendersubtree को activatable में बदलने से, invisible एट्रिब्यूट को हटाकर और कॉन्टेंट को रेंडर करके कॉन्टेंट को दिखने लगता है.

Chrome डेवलपर समिट 2019

अगर आपने Chrome डेवलपर सम्मेलन नहीं देखा है, तो इसकी सभी बातचीत हमारे YouTube चैनल पर की गई है.

जेक के पास Twitter पर एक बेहतरीन थ्रेड भी है. इन पर बातचीत के दौरान हुई मज़ेदार बातों के साथ-साथ, हमारी टीम के नए सदस्य, Surjiko भी शामिल हैं.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ मुख्य हाइलाइट शामिल की गई हैं. Chrome 78 में और बदलावों के लिए नीचे दिए गए लिंक देखें.

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

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