Chrome 102 में नया

Pete LePage

यहां आपके जानने योग्य तथ्य दिए गए हैं:

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

मेरा नाम पीट लेपेज है. आइए, देखते हैं कि Chrome 102 में डेवलपर के लिए क्या नया है.

फ़ाइल मैनेज करने वाला एपीआई

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

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

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

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

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

ज़्यादा जानकारी के लिए, इंस्टॉल किए गए वेब ऐप्लिकेशन को फ़ाइल हैंडलर बनने दें पर जाएं.

inert प्रॉपर्टी

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

यह यूज़र इंटरफ़ेस (यूआई) बनाते समय मददगार हो सकता है. उदाहरण के लिए, जब कोई मॉडल डायलॉग दिख रहा हो, तो हो सकता है कि आप फ़ोकस को मॉडल में "फ़ेच" करना चाहें. इसके अलावा, अगर उपयोगकर्ता को हमेशा ड्रॉअर नहीं दिखता है, तो inert जोड़ने से यह पक्का होता है कि ड्रॉअर के ऑफ़स्क्रीन होने पर, कीबोर्ड का इस्तेमाल करने वाला व्यक्ति गलती से उससे इंटरैक्ट न कर पाए.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

यहां inert को दूसरे <div> एलिमेंट पर डिक्लेयर्ड किया गया है. इसलिए, इसमें मौजूद सभी कॉन्टेंट पर फ़ोकस नहीं किया जा सकता या उस पर क्लिक नहीं किया जा सकता. इनमें <button> और <label> भी शामिल हैं.

inert, Chrome 102 में काम करता है. यह Firefox और Safari, दोनों में उपलब्ध होगा.

ज़्यादा जानकारी के लिए, पेश है इनर्ट लेख पढ़ें.

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

Navigation API का इस्तेमाल करने के लिए, ग्लोबल navigation ऑब्जेक्ट पर navigate listener जोड़ें.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

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

पूरी जानकारी और डेमो के लिए मॉडर्न क्लाइंट-साइड रूटिंग: नेविगेशन एपीआई देखें.

और भी कई सुविधाएं!

इसके अलावा, और भी बहुत कुछ है.

  • नए Sanitizer API का मकसद, किसी भी स्ट्रिंग को पेज में सुरक्षित तरीके से डालने के लिए, एक बेहतर प्रोसेसर बनाना है.
  • hidden=until-found एट्रिब्यूट की मदद से ब्राउज़र, छिपे हुए इलाकों में टेक्स्ट को खोज पाता है. साथ ही, मिलता-जुलता टेक्स्ट मिलने पर उस सेक्शन को दिखाता है.

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

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

सदस्यता लें

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

मेरा नाम पीट लीपेज है और जैसे ही Chrome 103 रिलीज़ होगा, मैं आपको Chrome की नई सुविधाओं के बारे में बताऊंगी!