Chrome 80 में नया

Chrome 80 अब रोल आउट हो रहा है और डेवलपर के लिए इसमें बहुत से नए प्रॉडक्ट हैं!

सहायता से जुड़ी ये सुविधाएं यहां दी गई हैं:

मैं पीट ली पेज हूं, चलिए देखते हैं और देखते हैं कि Chrome 80 में डेवलपर के लिए नया क्या है!

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

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

ऑरिजिन ट्रायल ग्रैजुएशन

ऐसी तीन नई सुविधाएं हैं जो ऑरिजिन ट्रायल से स्टेबल हैं. इसकी मदद से, कोई भी साइट बिना टोकन के उनका इस्तेमाल कर सकती है.

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

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

संपर्क पिकर

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

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

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

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

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

कॉन्टेंट इंडेक्स करने का एपीआई

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

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

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 को कॉल करना होगा और कॉन्टेंट के बारे में मेटाडेटा देना होगा.

इंडेक्स में जानकारी अपने-आप भर जाने के बाद, यह Android के डाउनलोड पेज पर Chrome में खास जगह पर दिखती है. पूरी जानकारी के लिए web.dev पर, जावेद की पोस्ट कॉन्टेंट इंडेक्स करने वाले एपीआई की मदद से अपने ऑफ़लाइन पेजों को इंडेक्स करना देखें.

सूचना ट्रिगर होना

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

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

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 को कॉल करें. सूचना के विकल्पों में, TimestampTrigger के साथ showTrigger प्रॉपर्टी जोड़ें. फिर, समय आने पर, ब्राउज़र सूचना दिखाएगा.

ऑरिजिन ट्रायल को 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 डेवलपर YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.

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