Chrome 102 में नया

Pete LePage

यहां आवश्यक जानकारी दी गई है:

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

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

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

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

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

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

इसके बाद, PWA के लॉन्च होने पर उन फ़ाइलों को ऐक्सेस करने के लिए, आपको 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, दोनों पर काम करता है.

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

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

नेविगेशन एपीआई का इस्तेमाल करने के लिए, ग्लोबल navigation ऑब्जेक्ट पर navigate लिसनर जोड़ें.

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 एपीआई का मकसद, आर्बिट्रेरी स्ट्रिंग के लिए एक मज़बूत प्रोसेसर बनाना है, ताकि उन्हें पेज में सुरक्षित तरीके से डाला जा सके.
  • hidden=until-found एट्रिब्यूट की मदद से, ब्राउज़र, छिपे हुए इलाकों में टेक्स्ट खोज सकता है. साथ ही, अगर मिलते-जुलते सेक्शन पर कोई मिलता-जुलता सेक्शन मिलता है, तो वह उसे दिखा पाता है.

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

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

सदस्यता लें

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

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