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: खास जानकारी

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

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