Chrome 86 में नया

पीट लीपेज
पीट लीपेज
Twitter GitHub Glitch Mastodon होम पेज

Chrome 86 अब स्टेबल होने वाला है.

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

मैं पीट लेपेज हूं, घर से काम कर रहा/रही हूं. आइए, देखते हैं और देखते हैं कि Chrome 86 में डेवलपर के लिए नया क्या है!

फ़ाइल सिस्टम का ऐक्सेस

फ़िलहाल, डिस्क से फ़ाइल को पढ़ने के लिए, <input type="file"> एलिमेंट का इस्तेमाल किया जा सकता है. बदलावों को सेव करने के लिए, किसी ऐंकर टैग में download जोड़ें. इससे फ़ाइल पिकर दिखेगा. इसके बाद, फ़ाइल सेव की जाएगी. आपने जिस फ़ाइल को खोला है उस पर लिखने का कोई तरीका नहीं है. वह वर्कफ़्लो परेशान करने वाला है.

File System Access API (इसे पहले Native File System API कहा जाता था) की मदद से, अब स्टेबल तरीके से उपलब्ध कराया जा सकता है. इससे showOpenFilePicker() को कॉल किया जा सकता है. यह फ़ाइल पिकर दिखाता है और फिर ऐसा फ़ाइल हैंडल दिखाता है जिसका इस्तेमाल फ़ाइल को पढ़ने के लिए किया जा सकता है.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

किसी फ़ाइल को डिस्क पर सेव करने के लिए, या तो उस फ़ाइल हैंडल का इस्तेमाल करें जो आपको पहले मिला था या नया फ़ाइल हैंडल पाने के लिए, showSaveFilePicker() को कॉल करें.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
अनुमति के अनुरोध का स्क्रीन शॉट
उपयोगकर्ता से फ़ाइल में बदलाव करने की अनुमति मांगें.

लिखने से पहले, Chrome यह देखेगा कि उपयोगकर्ता ने लिखने की अनुमति दी है या नहीं. अगर लिखने की अनुमति नहीं दी गई है, तो Chrome सबसे पहले उपयोगकर्ता को सूचना देगा.

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

इस एपीआई में और भी सुविधाएं हैं. इसलिए, web.dev पर फ़ाइल सिस्टम ऐक्सेस से जुड़ा लेख पढ़ें.

ऑरिजिन ट्रायल: WebHID

गेम कंट्रोलर
गेम कंट्रोलर.

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

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

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

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

एचआईडी डिवाइस पिकर
एचआईडी डिवाइस पिकर.

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

ज़्यादा जानकारी, उदाहरणों, शुरुआत करने का तरीका, और एक शानदार डेमो के लिए असामान्य एचआईडी डिवाइसों से कनेक्ट करना देखें.


ऑरिजिन ट्रायल: मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई

आज, window.screen() को कॉल करके उस स्क्रीन की प्रॉपर्टी देखी जा सकती है जिस पर ब्राउज़र विंडो चालू है. हालांकि, अगर आपके पास मल्टी-मॉनिटर सेटअप की सुविधा है, तो क्या होगा? माफ़ करें, ब्राउज़र आपको सिर्फ़ उस स्क्रीन के बारे में बताएगा जिस पर वह अभी चालू है.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई, Chrome 86 में ऑरिजिन ट्रायल शुरू करता है. इससे, मशीन से कनेक्ट की गई स्क्रीन के बारे में जानकारी मिलती है और विंडो को खास स्क्रीन पर रखा जा सकता है. प्रज़ेंटेशन ऐप्लिकेशन, वित्तीय सेवाओं के ऐप्लिकेशन वगैरह के लिए खास स्क्रीन पर विंडो रख पाना बहुत ज़रूरी है.

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

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

उपयोगकर्ता की अनुमति देने के बाद, window.getScreens() को कॉल करने से ऐसा प्रॉमिस दिखता है जो Screen ऑब्जेक्ट के कलेक्शन से रिज़ॉल्व हो जाता है.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

इसके बाद, requestFullScreen() को कॉल करते समय या नई विंडो डालते समय, इस जानकारी का इस्तेमाल किया जा सकता है. टॉम ने अपनी वेबसाइट पर, मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई की मदद से कई डिसप्ले मैनेज करना लेख में, web.dev पर पूरी जानकारी दी है.

अन्य डेटा

नया सीएसएस सिलेक्टर, :focus-visible, आपको उसी तरह के अनुमान पर ऑप्ट-इन करने की सुविधा देता है जिसका इस्तेमाल ब्राउज़र तब करता है, जब यह तय करता है कि डिफ़ॉल्ट फ़ोकस इंडिकेटर दिखाना है या नहीं.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

सीएसएस ::marker स्यूडो-एलिमेंट की मदद से, सूचियों के लिए रंग, साइज़ या संख्या या बुलेट के टाइप को अपनी पसंद के मुताबिक बनाया जा सकता है.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

आपको 'Chrome डेवलपर समिट' सुविधा, आपके आस-पास स्क्रीन पर दिखेगी. ज़्यादा जानकारी के लिए, हमारे YouTube चैनल पर हमारे साथ बने रहें!

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

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

सदस्यता लें

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

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