جدید در کروم 91

پیت لی پیج

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

من Pete LePage هستم، کار می‌کنم و از خانه عکاسی می‌کنم، بیایید شیرجه بزنیم و ببینیم چه چیز جدیدی برای توسعه‌دهندگان در Chrome 91 وجود دارد!

نام های پیشنهادی برای File System Access API

یکی از API های مورد علاقه من که امسال از پروژه Fugu بیرون آمد، API های دسترسی به سیستم فایل است. هنگامی که کاربر مجوز را اعطا کرد، برنامه ها می توانند با فایل های موجود در دستگاه محلی کاربران تعامل داشته باشند، به همان روشی که سایر برنامه های نصب شده این کار را انجام می دهند و به شما امکان می دهد تجربه کاربری طبیعی تری ایجاد کنید.

با شروع Chrome 91، اکنون می توانید نام و مکان یک فایل یا فهرست را برای تعامل با آن پیشنهاد دهید. برای انجام این کار، یک ویژگی suggestedName به عنوان بخشی از گزینه های showSaveFilePicker ارسال کنید.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

همین امر در مورد دایرکتوری شروع پیش فرض نیز صدق می کند. برای مثال، یک ویرایشگر متن احتمالاً می‌خواهد ذخیره فایل یا گفتگوی باز کردن فایل را در پوشه documents شروع کند. در حالی که یک ویرایشگر تصویر احتمالاً می خواهد در پوشه pictures شروع به کار کند. شما می توانید یک فهرست راه اندازی پیش فرض را با ارسال یک ویژگی startIn پیشنهاد دهید.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

برای جزئیات کامل، پست دسترسی به سیستم فایل Tom's را بررسی کنید.

خواندن فایل ها از کلیپ بورد

یک API جدید و جالب دیگر برای تعامل با فایل‌ها در Chrome 91 وجود دارد. در رایانه رومیزی، برنامه‌های وب اکنون می‌توانند فایل‌ها را از کلیپ بورد بخوانند. (خواندن فایل ها از کلیپ بورد از سال 2018 در سافاری در دسترس بوده است.)

البته، دسترسی نامحدودی به کلیپ بورد ندارید، بنابراین باید شنونده رویداد paste کنید. سپس، در کنترل کننده رویداد، می توانید به محتوای هر فایل در کلیپ بورد دسترسی داشته باشید.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

به اشتراک گذاری اعتبار در سایت های وابسته

اگر سایت شما دارای چندین دامنه است و مدیریت حساب کاربری یکسانی دارند، اکنون می توانید سایت های خود را با یکدیگر مرتبط کنید و به کاربران اجازه دهید یک بار اعتبارنامه ها را ذخیره کنند و مدیر رمز عبور Chrome آنها را به هر یک از سایت های وابسته شما پیشنهاد دهد.

این زمانی ایده آل است که سایت شما از دامنه های مختلف سطح بالا مانند google.com و google.ca ارائه شود. یا شاید شما چندین نام دامنه دارید.

برای مرتبط کردن وب سایت های خود، باید یک فایل assetlinks.json ایجاد کنید که رابطه بین دامنه ها را تعریف می کند. در مثال زیر، من به مرورگر می گویم که هر دو دامنه .com و .co.uk مرتبط هستند و می توانند اعتبارنامه ها را به اشتراک بگذارند.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

سپس فایل assetlinks.json را در پوشه .well-known برای هر دامنه میزبانی کنید.

این قابلیت به تدریج در Chrome 91 عرضه می‌شود و ممکن است در روز اول در دسترس نباشد، بنابراین برای اطلاع از آخرین جزئیات ، Chrome را فعال کنید تا اعتبار ورود به سیستم را در سایت‌های وابسته به اشتراک بگذارید .

و بیشتر!

البته چیزهای بیشتری وجود دارد.

همه ویدیوهای I/O 2021 اکنون آنلاین هستند، محتوای عالی در آنجا وجود دارد، پس آن را بررسی کنید!

حمل و نقل وب - که قبلا Quic Transport نامیده می شد، دستخوش تغییرات زیادی شده است و یک آزمایش اولیه جدید را آغاز می کند.

Web Assembly SIMD نسخه آزمایشی اصلی خود را به پایان رسانده است و برای همه کاربران در دسترس است.

عناصر فرم به روز شده سرانجام در اندروید قرار گرفتند و تجربه کاربری را بهبود بخشیدند.

و ویژگی media عنصر <link> برای link rel="icon" مورد احترام قرار می گیرد، به این معنی که می توانید نمادهای مختلفی را بر اساس جستجوهای رسانه تعریف کنید. به عنوان مثال آیکون های مختلف برای حالت های تاریک و روشن.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

در ادامه مطلب

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

مشترک شوید

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

من پیت لی پیج هستم و به محض انتشار کروم 92، اینجا خواهم بود تا به شما بگویم چه چیزی در کروم جدید است!