Chrome 103 में नया

Pete LePage

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

  • इसमें एक नया एचटीटीपी 103 स्टेटस कोड होता है. इससे ब्राउज़र को यह तय करने में मदद मिलती है कि पेज के आने से पहले ही कौनसा कॉन्टेंट पहले से लोड किया जाए.
  • Local Font Access API से वेब ऐप्लिकेशन, लोगों के कंप्यूटर पर इंस्टॉल किए गए फ़ॉन्ट की गिनती कर सकते हैं और उनका इस्तेमाल कर सकते हैं.
  • AbortSignal.timeout(), एसिंक्रोनस एपीआई पर टाइम आउट लागू करने का आसान तरीका है.
  • और भी बहुत कुछ है.

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

एचटीटीपी 103 स्टेटस कोड 103 - शुरुआती संकेत

संसाधन संकेतों का इस्तेमाल करना, पेज की परफ़ॉर्मेंस को बेहतर बनाने का एक तरीका है. वे ब्राउज़र को इस बारे में "संकेत" देते हैं कि बाद में किस चीज़ की ज़रूरत पड़ सकती है. उदाहरण के लिए, फ़ाइलों को पहले से लोड करना या किसी दूसरे सर्वर से कनेक्ट करना.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

हालांकि, ब्राउज़र तब तक उन संकेतों पर कार्रवाई नहीं कर सकता, जब तक सर्वर पेज का कम से कम कुछ हिस्सा नहीं भेज देता.

मान लें कि ब्राउज़र किसी पेज का अनुरोध करता है, लेकिन उसे जनरेट करने के लिए सर्वर को कुछ सौ मिलीसेकंड चाहिए. जब तक ब्राउज़र को पेज मिलना शुरू नहीं होता, तब तक वह बस वहीं बैठकर इंतज़ार करता है. हालांकि, अगर सर्वर को पता होगा कि पेज को हमेशा कुछ सबरिसॉर्स की ज़रूरत होगी, जैसे कि सीएसएस फ़ाइल, कुछ JavaScript, और कुछ इमेज, तो वह नए एचटीटीपी 103 अर्ली हिंट स्टेटस कोड का इस्तेमाल करके, ब्राउज़र को तुरंत जवाब दे सकता है. साथ ही, ब्राउज़र को उन सबरिसॉर्स को पहले से लोड करने के लिए कह सकता है.

पेज जनरेट करने के बाद, सर्वर उसे सामान्य एचटीटीपी 200 रिस्पॉन्स के साथ भेज सकता है. पेज के आने के साथ ही, ब्राउज़र ने पहले ही ज़रूरी रिसॉर्स लोड करना शुरू कर दिया है.

यह एक नया एचटीटीपी स्टेटस कोड है. इसलिए, इसे इस्तेमाल करने के लिए आपके सर्वर को अपडेट करना ज़रूरी है.

HTTP 103 शुरुआती संकेतों के साथ शुरू करें:

लोकल फ़ॉन्ट ऐक्सेस एपीआई

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

नए लोकल फ़ॉन्ट ऐक्सेस एपीआई से वेब ऐप्लिकेशन को उपयोगकर्ता के डिवाइस पर लोकल फ़ॉन्ट की गिनती करने की सुविधा मिलती है. साथ ही, फ़ॉन्ट टेबल के डेटा का ऐक्सेस भी मिलता है.

डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट की सूची पाने के लिए, आपको पहले अनुमति का अनुरोध करना होगा.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

इसके बाद, window.queryLocalFonts() पर कॉल करें. यह उपयोगकर्ताओं के डिवाइस पर इंस्टॉल किए गए सभी फ़ॉन्ट का कलेक्शन दिखाता है.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

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

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

पूरी जानकारी के लिए web.dev पर, टॉम का स्थानीय फ़ॉन्ट के साथ बेहतर टाइपोग्राफ़ी का इस्तेमाल करना देखें.

AbortSignal.timeout() की मदद से, टाइम आउट को आसानी से मैनेज करें

JavaScript में, AbortController और AbortSignal का इस्तेमाल एसिंक्रोनस कॉल को रद्द करने के लिए किया जाता है.

उदाहरण के लिए, fetch() अनुरोध करते समय, आपके पास AbortSignal बनाने और उसे fetch() को पास करने का विकल्प होता है. अगर आपको fetch() के वापस आने से पहले रद्द करना है, तो AbortSignal के इंस्टेंस पर abort() को कॉल करें. अब तक, अगर आपको इसे एक तय समय के बाद रद्द करना है, तो आपको इसे setTimeout() में रैप करना होगा.

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

अच्छी बात यह है कि AbortSignal पर, timeout() स्टैटिक तरीके से यह काम करना आसान हो गया. यह एक AbortSignal ऑब्जेक्ट दिखाता है, जो दिए गए मिलीसेकंड के बाद अपने-आप रद्द हो जाता है. जो कोड कुछ लाइनों वाला होता था, अब वह बस एक है.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() Chrome 103 में काम करता है. यह पहले से ही Firefox और Safari में उपलब्ध है.

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

  • वेब शेयर की मदद से, अब avif इमेज फ़ाइल फ़ॉर्मैट को शेयर किया जा सकता है
  • यूआरएल बदलने के तुरंत बाद popstate ट्रिगर करके, Chromium अब Firefox से मैच करता है. इवेंट का क्रम अब है: popstate के बाद hashchange. दोनों प्लैटफ़ॉर्म पर.
  • साथ ही, Element.isVisible() से आपको पता चलता है कि कोई एलिमेंट दिख रहा है या नहीं.

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

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

सदस्यता लें

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

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