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 है. यह एपीआई, उपयोगकर्ताओं को अपनी संपर्क सूची से एंट्री चुनने और चुनी गई एंट्री की सीमित जानकारी को वेबसाइट के साथ शेयर करने की अनुमति देता है.

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

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

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

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

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

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 DevTools (80) में नया क्या है
• Chrome 80 में बंद की गई सुविधाएं और हटाई गई सुविधाएं
• Chrome 80 के लिए ChromeStatus.com के अपडेट
• Chrome 80 में JavaScript में नया क्या है
• Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची

सदस्यता लें

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

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