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 रिस्पॉन्स के साथ भेज सकता है. पेज खुलने से पहले ही, ब्राउज़र ज़रूरी रिसॉर्स लोड करना शुरू कर देता है.

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

एचटीटीपी 103 को जल्द से जल्द लागू करने के लिए सलाह:

Local Font Access API

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

नए Local Font Access API की मदद से, वेब ऐप्लिकेशन उपयोगकर्ता के डिवाइस पर मौजूद लोकल फ़ॉन्ट की सूची बना सकते हैं. साथ ही, फ़ॉन्ट टेबल के डेटा को ऐक्सेस कर सकते हैं.

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

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

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