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 पर टॉम का लेख स्थानीय फ़ॉन्ट के साथ बेहतर टाइपोग्राफ़ी का इस्तेमाल करना पढ़ें.

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

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

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

सदस्यता लें

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

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