Chrome 79 अब रोल आउट किया जा रहा है!
- Android पर इंस्टॉल किए गए प्रोग्रेसिव वेब ऐप्लिकेशन, अब मास्क किए जा सकने वाले आइकॉन के साथ काम करते हैं.
- अब WebXR Device API की मदद से, शानदार अनुभव बनाए जा सकते हैं.
- Wake Lock 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"
]
...
}
Tiger Oakes ने CSS Tricks पर एक बेहतरीन पोस्ट लिखी है - मास्क किए जा सकने वाले आइकॉन: आपके PWA के लिए Android के अडैप्टिव आइकॉन. इसमें इस बारे में पूरी जानकारी दी गई है. साथ ही, इसमें एक बेहतरीन टूल भी है जिसका इस्तेमाल करके, अपने आइकॉन की जांच की जा सकती है, ताकि यह पक्का किया जा सके कि वे सही हैं.
वेब एक्सआर
अब 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 Dev Summit 2019
अगर आपने Chrome Dev Summit में हिस्सा नहीं लिया है, तो सभी टॉक हमारे YouTube चैनल पर उपलब्ध हैं.
जेक के पास एक बेहतरीन Twitter थ्रेड भी है जिसमें बातचीत के दौरान हुई सभी मज़ेदार चीज़ें हैं. इसमें हमारी टीम के सबसे नए सदस्य सुर्जिको भी शामिल हैं.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ अहम हाइलाइट के बारे में बताया गया है. Chrome 78 में हुए अतिरिक्त बदलावों के बारे में जानने के लिए, नीचे दिया गया लिंक देखें.
- Chrome DevTools (79) में नया क्या है
- Chrome 79 में बंद की गई सुविधाएं और हटाई गई सुविधाएं
- Chrome 79 के लिए ChromeStatus.com के अपडेट
- Chrome 79 में JavaScript में नया क्या है
- Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
सदस्यता लें
अगर आपको हमारे वीडियो के बारे में अप-टू-डेट रहना है, तो Chrome Developers के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
मेरा नाम पीट लेपेज है. Chrome 80 के रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!