Chrome 73 में नया

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

और यहां और भी बहुत कुछ है!

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

बदलाव लॉग

यहां सिर्फ़ कुछ मुख्य हाइलाइट के बारे में बताया गया है. Chrome 73 में किए गए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

प्रोग्रेसिव वेब ऐप्लिकेशन हर जगह काम करते हैं

प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने लायक, ऐप्लिकेशन जैसा अनुभव देते हैं. इसे सीधे वेब के ज़रिए बनाया और डिलीवर किया जाता है. हमने Chrome 73 में macOS के लिए सहायता जोड़ी है. इससे सभी डेस्कटॉप प्लैटफ़ॉर्म पर प्रोग्रेसिव वेब ऐप्लिकेशन के साथ-साथ, मोबाइल पर भी वेब ऐप्लिकेशन डेवलप करना आसान हो गया है. इन प्लैटफ़ॉर्म में Mac, Windows, ChromeOS, और Linux शामिल हैं.

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

उपयोगकर्ता, Chrome के संदर्भ मेन्यू से आपके PWA को इंस्टॉल कर सकते हैं. इसके अलावा, beforeinstallprompt इवेंट का इस्तेमाल करके, सीधे तौर पर इंस्टॉल करने के अनुभव का प्रमोशन किया जा सकता है. इंस्टॉल हो जाने के बाद, PWA किसी नेटिव ऐप्लिकेशन की तरह काम करने के लिए, ओएस के साथ इंटिग्रेट हो जाता है: उपयोगकर्ता उन्हें उसी जगह से ढूंढकर लॉन्च करते हैं जहां से अन्य ऐप्लिकेशन काम करते हैं, वे अपनी विंडो में चलते हैं, वे टास्क स्विचर में दिखते हैं, उनके आइकॉन, सूचना का बैज दिखा सकते हैं और इसी तरह की अन्य सुविधाएं.

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

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

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

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

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

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

Signed Exchange: खास जानकारी

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