Chrome 73 में नया

पीट लीपेज

Twitter GitHub Glitch Mastodon होम पेज

Chrome 73 में, हमने इनके लिए सहायता जोड़ी है:

• साइन किए गए एचटीटीपी एक्सचेंज की मदद से, आसानी से पोर्टेबल कॉन्टेंट बनाना.
• बनाई जा सकने वाली स्टाइल शीट के साथ, स्टाइल को डाइनैमिक तरीके से बदलना आसान हो जाता है.
• प्रोग्रेसिव वेब ऐप्लिकेशन के लिए सहायता, Mac पर उपलब्ध है. इससे सभी डेस्कटॉप और मोबाइल प्लैटफ़ॉर्म पर PWA काम करता है. इससे, इंस्टॉल किए जा सकने वाले ऐप्लिकेशन बनाना आसान हो जाता है. इन्हें वेब से डिलीवर किया जा सकता है.

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

मेरा नाम पीट लेपेज है. आइए और जानें और देखें कि 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 अलग नहीं है. अगर आपने रिस्पॉन्सिव डिज़ाइन का इस्तेमाल किया है, तो बेहतर होगा कि आप उसे इस्तेमाल कर लें. आपका एक कोडबेस, डेस्कटॉप और मोबाइल, दोनों पर काम करेगा. अगर आपने हाल ही में PWA का इस्तेमाल शुरू किया है, तो आपको यह जानकर हैरानी होगी कि इन्हें बनाना कितना आसान है!

1. मेनिफ़ेस्ट जोड़ें
2. आइकॉन का सेट बनाना
3. बॉयलरप्लेट सर्विस वर्कर जोड़ना

इसके बाद, इसे दोहराएं.

साइन किए हुए एचटीटीपी एक्सचेंज

साइन किए हुए एचटीटीपी एक्सचेंज (एसएक्सजी), वेब पैकेज नाम की एक उभरती हुई टेक्नोलॉजी का हिस्सा हैं. अब यह Chrome 73 पर उपलब्ध है. हस्ताक्षर किए गए एचटीटीपी एक्सचेंज की मदद से, ऐसा "पोर्टेबल" कॉन्टेंट बनाया जा सकता है जिसे दूसरे पक्ष डिलीवर कर सकें. यह एक अहम पहलू है, क्योंकि इसमें ओरिजनल साइट की इंटिग्रिटी और एट्रिब्यूशन को बनाए रखा जाता है.

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

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

शुरू करने के तरीके के बारे में जानने के लिए, Kinuko का साइन किए हुए एचटीटीपी एक्सचेंज से जुड़ा पोस्ट देखें.

बनाने लायक स्टाइल शीट

बनाने लायक स्टाइलशीट, Chrome 73 में नई हैं. यह हमें फिर से इस्तेमाल की जा सकने वाली स्टाइल बनाने और उन्हें उपलब्ध कराने का नया तरीका उपलब्ध कराती है. यह खास तौर पर शैडो DOM को इस्तेमाल करते समय ज़रूरी होता है.

JavaScript का इस्तेमाल करके स्टाइलशीट बनाना हमेशा से संभव रहा है. document.createElement('style') का इस्तेमाल करके <style> एलिमेंट बनाएं. इसके बाद, दिए गए CSSStyleSheet इंस्टेंस का रेफ़रंस पाने के लिए, इसकी शीट प्रॉपर्टी को ऐक्सेस करें और स्टाइल सेट करें.

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

शेयर किए गए 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(), स्ट्रिंग प्रोटोटाइप पर रेगुलर एक्सप्रेशन से मैच करने का एक नया तरीका है. यह पूरे मैच वाली ऐरे दिखाता है.
• HTMLImageElement के srcset और sizes एट्रिब्यूट से मेल खाने के लिए, अब <link> एलिमेंट imagesrcset और imagesizes प्रॉपर्टी के साथ काम करता है.
• ब्लिंक का शैडो ब्लर रेडियस लागू किया गया है, अब यह Firefox और Safari से मेल खाता है.
• Chrome के यूज़र इंटरफ़ेस (यूआई) के लिए, गहरे रंग वाला मोड अब Mac पर काम करता है. साथ ही, Windows पर भी यह सुविधा काम करने वाली है. इसके अलावा, एक सीएसएस मीडिया क्वेरी पर भी काम किया जाता है: prefers-color-scheme, इसका इस्तेमाल यह पता लगाने के लिए किया जा सकता है कि उपयोगकर्ता ने सिस्टम से अनुरोध किया है कि वह हल्के या गहरे रंग वाली थीम का इस्तेमाल करे. इसके लिए ट्रैकिंग बग यह है कि Chrome और Firefox के लिए सीएसएस prefers-color-scheme मीडिया सुविधा के लिए सहायता जोड़ें.

सदस्यता लें

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

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