جدید در کروم 86

پیت لی پیج

کروم 86 در حال عرضه به حالت پایدار است.

در اینجا چیزی است که شما باید بدانید:

من Pete LePage هستم، از خانه کار می‌کنم و عکس‌برداری می‌کنم، بیایید شیرجه بزنیم و ببینیم چه چیزی برای توسعه‌دهندگان 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);
}

برای ذخیره یک فایل در دیسک، می‌توانید از دسته فایلی که قبلاً دریافت کرده‌اید استفاده کنید یا با call 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() یک دایرکتوری باز می شود و به شما امکان می دهد لیستی از فایل ها را دریافت کنید یا فایل های جدیدی را در آن دایرکتوری ایجاد کنید. ایده آل برای چیزهایی مانند IDE ها، یا پخش کننده های رسانه ای که با فایل های زیادی تعامل دارند. البته قبل از اینکه بتوانید چیزی بنویسید، کاربر باید اجازه نوشتن بدهد.

API چیزهای بیشتری وجود دارد، بنابراین مقاله دسترسی به سیستم فایل را در web.dev بررسی کنید.

آزمایش اولیه: WebHID

کنترل کننده بازی
کنترل کننده بازی.

دستگاه‌های رابط انسانی که معمولاً به عنوان HID شناخته می‌شوند، ورودی را از انسان‌ها دریافت می‌کنند یا خروجی را برای آنها فراهم می‌کنند. دم درازی از دستگاه‌های رابط انسانی وجود دارد که بسیار جدید، قدیمی یا غیر معمول هستند که توسط درایورهای دستگاه سیستم قابل دسترسی نیستند.

WebHID API که اکنون به عنوان یک آزمایش اولیه در دسترس است، این مشکل را با ارائه راهی برای دسترسی به این دستگاه ها در جاوا اسکریپت حل می کند. با WebHID، بازی‌های مبتنی بر وب می‌توانند از گیم‌پدها، از جمله همه دکمه‌ها، جوی استیک‌ها، حسگرها، ماشه‌ها، LED‌ها، بسته‌های رامبل و غیره استفاده کنند.

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);
});

برنامه‌های چت ویدیویی مبتنی بر وب می‌توانند از دکمه‌های تلفن در بلندگوهای تخصصی برای شروع یا پایان تماس، بی‌صدا کردن صدا و موارد دیگر استفاده کنند.

انتخابگر دستگاه HID
انتخابگر دستگاه HID.

البته، API های قدرتمندی مانند این، تنها زمانی می توانند با دستگاه ها تعامل داشته باشند که کاربر صراحتاً اجازه دهد.

برای جزئیات بیشتر، مثال‌ها، نحوه شروع کار و یک نسخه نمایشی جالب ، اتصال به دستگاه‌های HID غیر معمول را بررسی کنید.


Origin Trial: API قرار دادن پنجره چند صفحه‌ای

امروز، می‌توانید با فراخوانی window.screen() ویژگی‌های صفحه‌ای که پنجره مرورگر در آن است را دریافت کنید. اما اگر راه اندازی چند مانیتور داشته باشید چه؟ با عرض پوزش، مرورگر فقط در مورد صفحه ای که در حال حاضر روی آن است به شما اطلاع می دهد.

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

API قرار دادن پنجره چند صفحه‌ای، یک آزمایش اولیه را در Chrome 86 آغاز می‌کند، به شما امکان می‌دهد صفحه‌های متصل به دستگاه خود را برشمارید و پنجره‌ها را روی صفحه‌های خاص قرار دهید. امکان قرار دادن پنجره ها روی صفحه نمایش های خاص برای مواردی مانند برنامه های ارائه، برنامه های خدمات مالی و موارد دیگر بسیار مهم است.

قبل از اینکه بتوانید از API استفاده کنید، باید مجوز درخواست کنید. اگر این کار را نکنید، زمانی که برای اولین بار سعی می کنید از آن استفاده کنید، مرورگر از کاربر درخواست می کند.

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() یا قرار دادن پنجره‌های جدید استفاده کنم. تام تمام جزئیات را در مقاله مدیریت چندین نمایشگر خود با مقاله API قرار دادن پنجره چند صفحه در web.dev دارد.

و بیشتر

انتخابگر جدید CSS، :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);
}

شما می توانید رنگ، اندازه یا نوع شماره یا گلوله لیست ها را با استفاده از CSS ::marker Pseudo-Element سفارشی کنید.

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

و Chrome Dev Summit به صفحه‌ای در نزدیکی شما می‌آید، بنابراین برای اطلاعات بیشتر با کانال YouTube ما همراه باشید!

بیشتر خواندن

این تنها برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 86 پیوندهای زیر را بررسی کنید.

اشتراک در

می‌خواهید با ویدیوهای ما به‌روز بمانید، سپس در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم یا فید RSS خود را به فیدخوان خود اضافه کنیم، یک اعلان ایمیل دریافت خواهید کرد.

من Pete LePage هستم، و به محض انتشار Chrome 87، من اینجا خواهم بود تا به شما بگویم -- چه چیزهای جدیدی در Chrome وجود دارد!