इस पेज का अनुवाद Cloud Translation API से किया गया है.

Chrome 80 में नया

Pete LePage

Chrome 80 वर्शन लॉन्च हो गया है. इसमें डेवलपर के लिए बहुत सारी नई सुविधाएं हैं!

इन पर यह सुविधा काम करती है:

वर्कर्स में मॉड्यूल
JavaScript में ज़रूरी नहीं है कि चेन
ऑरिजिन ट्रायल की नई सुविधाएं
ऑरिजिन ट्रायल से बाहर निकल चुकी सुविधाएं
इसके अलावा, और भी बहुत कुछ किया जा सकता है.

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

मॉड्यूल वर्कर

मॉड्यूल वर्कर, वेब वर्कर के लिए एक नया मोड है. इसमें, JavaScript मॉड्यूल के काम करने के तरीके और परफ़ॉर्मेंस के फ़ायदे मिलते हैं. Worker के कंस्ट्रक्टर में एक नया {type: "module"} विकल्प जोड़ा गया है. इससे <script type="module"> से मैच करने के लिए, स्क्रिप्ट लोड और लागू करने के तरीके में बदलाव होता है

const worker = new Worker('worker.js', {
  type: 'module'
});

JavaScript मॉड्यूल का इस्तेमाल करने पर, धीरे-धीरे लोड होने वाले कोड के लिए डाइनैमिक इंपोर्ट का इस्तेमाल भी किया जा सकता है. ऐसा करने पर, वर्कर्स के एक्सीक्यूशन को ब्लॉक नहीं किया जाता. ज़्यादा जानकारी के लिए, web.dev पर जेसन की पोस्ट मॉड्यूल वर्कर की मदद से वेब को थ्रेड करना देखें.

वैकल्पिक चेन

किसी ऑब्जेक्ट में नेस्ट की गई प्रॉपर्टी को पढ़ने की कोशिश करने पर, गड़बड़ी हो सकती है. ऐसा खास तौर पर तब होता है, जब किसी प्रॉपर्टी का आकलन न हो पाए.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

आगे बढ़ने से पहले हर वैल्यू की जांच करने पर, यह आसानी से नेस्ट किए गए if stmt में बदल जाता है या इसके लिए try / catch ब्लॉक की ज़रूरत होती है.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 में, JavaScript की एक नई सुविधा जोड़ी गई है. इसे ज़रूरी नहीं है कि चेन कहा जाता है. वैकल्पिक चेनिंग की मदद से, अगर कोई प्रॉपर्टी गड़बड़ी का मैसेज दिखाने के बजाय, शून्य या 'तय नहीं की गई' वैल्यू दिखाती है, तो पूरा फ़ंक्शन 'तय नहीं की गई' वैल्यू दिखाता है.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

ज़्यादा जानकारी के लिए, v8 ब्लॉग पर ज़रूरी नहीं है कि चेनिंग वाली ब्लॉग पोस्ट देखें!

ऑरिजिन ट्रायल के बाद सदस्यताएं खरीदना

तीन नई सुविधाएं, ऑरिजिन ट्रायल से स्टेबल वर्शन में अपग्रेड हो गई हैं. इनका इस्तेमाल, टोकन के बिना किसी भी साइट पर किया जा सकता है.

समय-समय पर होने वाला बैकग्राउंड सिंक

पहला, समय-समय पर बैकग्राउंड में सिंक करना. यह समय-समय पर बैकग्राउंड में डेटा सिंक करता है, ताकि जब कोई उपयोगकर्ता आपका इंस्टॉल किया गया पीडब्ल्यूए खोले, तो उसके पास हमेशा सबसे नया डेटा हो.

संपर्क पिकर

अगला एपीआई, Contact Picker API है. यह एपीआई, उपयोगकर्ताओं को अपनी संपर्क सूची से एंट्री चुनने और चुनी गई एंट्री की सीमित जानकारी को वेबसाइट के साथ शेयर करने की सुविधा देता है.

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

इंस्टॉल किए गए मिलते-जुलते ऐप्लिकेशन पाना

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

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

नए ऑरिजिन ट्रायल

Content indexing API

उपयोगकर्ताओं को अपने PWA में कैश मेमोरी में सेव किए गए कॉन्टेंट के बारे में कैसे बताया जा सकता है? यहां डिस्कवरी से जुड़ी कोई समस्या है. क्या उन्हें आपका ऐप्लिकेशन खोलने का तरीका पता होगा? या कौनसा कॉन्टेंट उपलब्ध है?

Content Indexing API, एक नया ऑरिजिन ट्रायल है. इसकी मदद से, ऑफ़लाइन कॉन्टेंट के यूआरएल और मेटाडेटा को ब्राउज़र के बनाए गए स्थानीय इंडेक्स में जोड़ा जा सकता है. यह इंडेक्स, उपयोगकर्ता को आसानी से दिखता है.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

इंडेक्स में कुछ जोड़ने के लिए, मुझे सर्विस वर्कर्स का रजिस्ट्रेशन चाहिए. इसके बाद, index.add को कॉल करके कॉन्टेंट के बारे में मेटाडेटा देना होगा.

इंडेक्स भर जाने के बाद, इसे Chrome for Android के डाउनलोड पेज के खास सेक्शन में दिखाया जाता है. ज़्यादा जानकारी के लिए, web.dev पर जेफ़ की पोस्ट Content Indexing API की मदद से, ऑफ़लाइन काम करने वाले पेजों को इंडेक्स करना देखें.

सूचना ट्रिगर करने वाले इवेंट

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

सूचना ट्रिगर की मदद से, सूचनाएं पहले से शेड्यूल की जा सकती हैं. इससे ऑपरेटिंग सिस्टम, सूचना को सही समय पर डिलीवर कर पाएगा. भले ही, नेटवर्क कनेक्शन न हो या डिवाइस बैटरी सेवर मोड में हो.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

सूचना शेड्यूल करने के लिए, सेवा वर्कर रजिस्टरेशन पर showNotification को कॉल करें. सूचना के विकल्पों में, showTrigger प्रॉपर्टी के साथ TimestampTrigger जोड़ें. इसके बाद, तय समय पर ब्राउज़र सूचना दिखाएगा.

ऑरिजिन ट्रायल को Chrome 83 के साथ चलाने का प्लान है. इसलिए, पूरी जानकारी के लिए, web.dev पर टॉम की सूचना ट्रिगर पोस्ट देखें.

अन्य ऑरिजिन ट्रायल

Chrome 80 में कुछ और ऑरिजिन ट्रायल शुरू हो रहे हैं:

वेब सीरीज़
PWA के लिए, फ़ाइल हैंडलर के तौर पर रजिस्टर करने की सुविधा
संपर्क चुनने वाले टूल के लिए नई प्रॉपर्टी

ऑरिजिन ट्रायल में मिलने वाली सुविधाओं की पूरी सूची देखें.

अन्य डेटा

बेशक, और भी बहुत कुछ है!

अब #:~:text=something का इस्तेमाल करके, सीधे पेज पर मौजूद टेक्स्ट फ़्रैगमेंट को लिंक किया जा सकता है. Chrome, उस टेक्स्ट फ़्रैगमेंट के पहले इंस्टेंस पर स्क्रोल करेगा और उसे हाइलाइट करेगा. उदाहरण के लिए, https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
डेस्कटॉप पर PWA के लिए display: minimal-ui सेट करने पर, इंस्टॉल किए गए PWA के टाइटल बार में 'वापस जाएं' और 'फिर से लोड करें' बटन जुड़ जाता है.
साथ ही, Chrome में अब फ़ैविकन के तौर पर SVG इमेज का इस्तेमाल किया जा सकता है.

इसके बारे में और पढ़ें

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

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

मेरा नाम पीट लेपेज है. Chrome 81 के रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!