Chrome 86 में नया

Pete LePage

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() को कॉल करते समय या नई विंडो डालते समय, उस जानकारी का इस्तेमाल किया जा सकता है. Tom ने 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 Dev Summit, आपके आस-पास की स्क्रीन पर दिखेगा. ज़्यादा जानकारी के लिए, हमारे YouTube चैनल पर बने रहें!

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

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

सदस्यता लें

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

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