Chrome 73 में, हमने इनके लिए सहायता जोड़ी है:
- साइन किए गए एचटीटीपी एक्सचेंज की मदद से, पोर्टेबल कॉन्टेंट बनाना आसान हो गया है.
- बनाई जा सकने वाली स्टाइल शीट की मदद से, डाइनैमिक तौर पर स्टाइल बदलना काफ़ी आसान हो जाता है.
- Mac पर प्रोग्रेसिव वेब ऐप्लिकेशन की सुविधा उपलब्ध है. इससे सभी डेस्कटॉप और मोबाइल प्लैटफ़ॉर्म पर पीडब्ल्यूए काम करना आसान हो गया है. इससे, वेब से इंस्टॉल किए जा सकने वाले ऐप्लिकेशन बनाना आसान हो गया है.
और यहां और भी बहुत कुछ है!
मैं पीट लेपेज हूं. आइए, जानें कि Chrome 73 में डेवलपर के लिए क्या नया है!
बदलाव लॉग
यहां सिर्फ़ कुछ मुख्य हाइलाइट के बारे में बताया गया है. Chrome 73 में किए गए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.
- Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
- Chrome 73 के लिए ChromeStatus.com के अपडेट
- Chrome 73 में बंद की गई सुविधाएं और हटाई गई सुविधाएं
- Chrome 73 में मीडिया से जुड़े अपडेट
- Chrome 73 में JavaScript में नया क्या है
प्रोग्रेसिव वेब ऐप्लिकेशन हर जगह काम करते हैं
प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने लायक, ऐप्लिकेशन जैसा अनुभव देते हैं. इसे सीधे वेब के ज़रिए बनाया और डिलीवर किया जाता है. हमने Chrome 73 में macOS के लिए सहायता जोड़ी है. इससे सभी डेस्कटॉप प्लैटफ़ॉर्म पर प्रोग्रेसिव वेब ऐप्लिकेशन के साथ-साथ, मोबाइल पर भी वेब ऐप्लिकेशन डेवलप करना आसान हो गया है. इन प्लैटफ़ॉर्म में Mac, Windows, ChromeOS, और Linux शामिल हैं.
प्रोग्रेसिव वेब ऐप्लिकेशन तेज़ और भरोसेमंद होता है. यह नेटवर्क कनेक्शन के बावजूद, हमेशा एक ही स्पीड से लोड होता है और परफ़ॉर्म करता है. ये आधुनिक वेब सुविधाओं के ज़रिए शानदार और दिलचस्प अनुभव देते हैं, जो डिवाइस की सुविधाओं का पूरा फ़ायदा लेते हैं.
उपयोगकर्ता, Chrome के संदर्भ मेन्यू से आपके PWA को इंस्टॉल कर सकते हैं. इसके अलावा, beforeinstallprompt
इवेंट का इस्तेमाल करके, सीधे तौर पर इंस्टॉल करने के अनुभव का प्रमोशन किया जा सकता है. इंस्टॉल हो जाने के बाद, PWA किसी नेटिव ऐप्लिकेशन की तरह काम करने के लिए, ओएस के साथ इंटिग्रेट हो जाता है: उपयोगकर्ता उन्हें उसी जगह से ढूंढकर लॉन्च करते हैं जहां से अन्य ऐप्लिकेशन काम करते हैं, वे अपनी विंडो में चलते हैं, वे टास्क स्विचर में दिखते हैं, उनके आइकॉन, सूचना का बैज दिखा सकते हैं और इसी तरह की अन्य सुविधाएं.
हम वेब और नेटिव के बीच क्षमता के अंतर को कम करना चाहते हैं, ताकि वेब पर डिलीवर किए जाने वाले आधुनिक ऐप्लिकेशन के लिए एक बेहतर आधार दिया जा सके. हम वेब प्लैटफ़ॉर्म की नई सुविधाएं जोड़ने पर काम कर रहे हैं. इनकी मदद से, आपको फ़ाइल सिस्टम, वेक लॉक जैसी चीज़ों का ऐक्सेस मिलता है. साथ ही, पते के बार में ऐंबियंट बैज जोड़कर, उपयोगकर्ताओं को यह जानकारी दी जा सकती है कि आपका PWA इंस्टॉल किया जा सकता है. इसके अलावा, हम एंटरप्राइज़ के लिए नीति इंस्टॉल करने की सुविधा और इस तरह की कई सुविधाएं जोड़ रहे हैं.
अगर आपने पहले से ही मोबाइल PWA बनाया है, तो डेस्कटॉप PWA बनाने में कोई फ़र्क़ नहीं पड़ता. असल में, अगर आपने रिस्पॉन्सिव डिज़ाइन का इस्तेमाल किया है, तो हो सकता है कि आपके पास पहले से ही यह सुविधा हो. आपका सिंगल कोडबेस डेस्कटॉप और मोबाइल पर काम करेगा. अगर आपने अभी-अभी पीडब्ल्यूए का इस्तेमाल करना शुरू किया है, तो आपको यह जानकर हैरानी होगी कि इन्हें बनाना कितना आसान है!
इसके बाद, वहां से दोहराएं.
साइन किए हुए एचटीटीपी एक्सचेंज
साइन किए गए एचटीटीपी एक्सचेंज (एसएक्सजी), वेब पैकेज नाम की नई टेक्नोलॉजी का हिस्सा है. यह सुविधा अब Chrome 73 में उपलब्ध है. हस्ताक्षर किए गए एचटीटीपी एक्सचेंज की मदद से, "पोर्टेबल" कॉन्टेंट बनाया जा सकता है. इसे दूसरी पार्टियां डिलीवर कर सकती हैं. इस कॉन्टेंट में, ओरिजनल साइट की जानकारी और एट्रिब्यूशन को बनाए रखा जाता है.
इससे कॉन्टेंट के ऑरिजिन को, उसे डिलीवर करने वाले सर्वर से अलग कर दिया जाता है. हालांकि, इस पर हस्ताक्षर होने की वजह से, ऐसा लगता है कि इसे आपके सर्वर से डिलीवर किया जा रहा है. जब ब्राउज़र इस Signed Exchange को लोड करता है, तो यह आपके यूआरएल को पता बार में सुरक्षित तरीके से दिखा सकता है, क्योंकि एक्सचेंज में हस्ताक्षर से पता चलता है कि कॉन्टेंट मूल रूप से आपके ऑरिजिन से आया है.
हस्ताक्षर किए गए एचटीटीपी एक्सचेंज की मदद से, उपयोगकर्ताओं को कॉन्टेंट तेज़ी से डिलीवर किया जा सकता है. इससे, अपने सर्टिफ़िकेट की निजी कुंजी का कंट्रोल छोड़े बिना, सीडीएन के फ़ायदे पाए जा सकते हैं. एएमपी टीम, Google के खोज नतीजों वाले पेजों पर, साइन किए गए एचटीटीपी एक्सचेंज का इस्तेमाल करने की योजना बना रही है. इससे, एएमपी यूआरएल को बेहतर बनाने और खोज नतीजों पर क्लिक करने की स्पीड को बढ़ाने में मदद मिलेगी.
शुरू करने का तरीका जानने के लिए, Kinuko की साइन किए गए एचटीटीपी एक्सचेंज वाली पोस्ट देखें.
बनाई जाने वाली स्टाइल शीट
Chrome 73 में, कॉन्स्ट्रक्ट की जा सकने वाली स्टाइलशीट की सुविधा जोड़ी गई है. इससे, फिर से इस्तेमाल की जा सकने वाली स्टाइल बनाने और उन्हें डिस्ट्रिब्यूट करने का एक नया तरीका मिलता है. यह सुविधा, शैडो DOM का इस्तेमाल करते समय खास तौर पर अहम होती है.
JavaScript का इस्तेमाल करके, स्टाइलशीट बनाने की सुविधा हमेशा से उपलब्ध है. document.createElement('style')
का इस्तेमाल करके, <style>
एलिमेंट बनाएं. इसके बाद, CSSStyleSheet
इंस्टेंस का रेफ़रंस पाने और स्टाइल सेट करने के लिए, इसकी शीट प्रॉपर्टी को ऐक्सेस करें.
इस तरीके का इस्तेमाल करने से स्टाइल शीट ख़राब हो जाती है. इससे भी बुरा यह है कि इससे स्टाइल न किए गए कॉन्टेंट का फ़्लैश दिखता है. कंस्ट्रक्शन करने लायक स्टाइलशीट की मदद से, शेयर की गई सीएसएस स्टाइल को तय किया जा सकता है और तैयार किया जा सकता है. इसके बाद, इन स्टाइल को कई शैडो रूट या दस्तावेज़ पर आसानी से और बिना डुप्लिकेशन के लागू किया जा सकता है.
शेयर की गई CSSStyleSheet
में किए गए बदलाव, उन सभी रूट पर लागू होते हैं जहां इसे अपनाया गया है. साथ ही, शीट लोड होने के बाद, स्टाइलशीट को अपनाना तेज़ और सिंक होता है.
इसका इस्तेमाल करना आसान है. CSSStyleSheet
का नया इंस्टेंस बनाएं. इसके बाद, स्टाइलशीट के नियमों को अपडेट करने के लिए, replace
या replaceSync
का इस्तेमाल करें.
const sheet = new CSSStyleSheet();
// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');
// this throws an exception:
try {
sheet.replaceSync('@import url("styles.css")');
} catch (err) {
console.error(err); // imports are not allowed
}
// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
.then(sheet => {
console.log('Styles loaded successfully');
})
.catch(err => {
console.error('Failed to load:', err);
});
ज़्यादा जानकारी और कोड सैंपल के लिए, जेसन मिलर की बनाई जा सकने वाली स्टाइलशीट: बार-बार इस्तेमाल की जा सकने वाली स्टाइल पोस्ट देखें!
और भी कई सुविधाएं!
डेवलपर के लिए, Chrome 73 में ये सिर्फ़ कुछ बदलाव हैं. इसमें और भी कई बदलाव किए गए हैं.
matchAll()
, स्ट्रिंग प्रोटोटाइप पर रेगुलर एक्सप्रेशन मैचिंग का एक नया तरीका है. यह ऐसी कैटगरी दिखाता है जिसमें पूरे मैच होते हैं.<link>
एलिमेंट में अबimagesrcset
औरimagesizes
प्रॉपर्टी का इस्तेमाल किया जा सकता है. ऐसा इसलिए किया जाता है, ताकिHTMLImageElement
केsrcset
औरsizes
एट्रिब्यूट के साथ मेल खाया जा सके.- Blink में, शैडो ब्लर रेडियस लागू करने का तरीका अब Firefox और Safari जैसा ही है.
- Chrome के यूज़र इंटरफ़ेस (यूआई) के लिए डार्क मोड की सुविधा अब Mac पर काम करती है. यह सुविधा जल्द ही Windows पर भी उपलब्ध होगी. इसके अलावा, सीएसएस मीडिया क्वेरी:
prefers-color-scheme
पर भी काम किया जा रहा है. इसका इस्तेमाल यह पता लगाने के लिए किया जा सकता है कि उपयोगकर्ता ने सिस्टम से हल्की या गहरे रंग की थीम का इस्तेमाल करने का अनुरोध किया है या नहीं. इस गड़बड़ी को ट्रैक करने के लिए, Chrome और Firefox के लिए, सीएसएसprefers-color-scheme
मीडिया फ़ीचर के लिए सहायता जोड़ें ट्रैकिंग बग है.
सदस्यता लें
अगर आपको हमारे वीडियो के बारे में अप-टू-डेट रहना है, तो Chrome Developers के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
मेरा नाम पीट लेपेज है. Chrome 74 के रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!