جدید در کروم 107

آدریانا خارا

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

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 107 وجود دارد.

ویژگی های جدید در Screen Capture API

در این نسخه Screen Capture API ویژگی های جدیدی را برای بهبود تجربه اشتراک گذاری صفحه اضافه می کند.

DisplayMediaStreamOptions ویژگی selfBrowserSurface را اضافه کرد. با این اشاره، برنامه می تواند به مرورگر بگوید که هنگام فراخوانی getDisplayMedia() باید برگه فعلی حذف شود.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

این به جلوگیری از گرفتن تصادفی خود کمک می کند و از جلوه "تالار آینه ها" که در کنفرانس های ویدئویی دیده ایم جلوگیری می کند.

DisplayMediaStreamOptions اکنون دارای ویژگی surfaceSwitching نیز می باشد. این ویژگی گزینه‌ای را اضافه می‌کند تا از طریق برنامه‌ریزی کنترل کند که آیا کروم دکمه‌ای را برای جابه‌جایی برگه‌ها هنگام اشتراک‌گذاری صفحه نمایش نشان می‌دهد یا خیر. این گزینه ها به getDisplayMedia() منتقل می شوند. دکمه Share this tab instead به کاربران اجازه می‌دهد بدون بازگشت به برگه کنفرانس ویدیویی یا انتخاب از فهرست طولانی برگه‌ها، به یک برگه جدید سوئیچ کنند، اما در صورتی که برنامه وب آن را مدیریت نکند، این رفتار به صورت مشروط آشکار می‌شود.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

همچنین MediaTrackConstraintSet ویژگی displaySurface را اضافه می کند. هنگامی که getDisplayMedia() نامیده می شود، مرورگر به کاربر امکان انتخاب سطوح نمایش را می دهد: زبانه ها، پنجره ها یا مانیتورها. با استفاده از محدودیت displaySurface ، برنامه وب اکنون ممکن است به مرورگر اشاره کند اگر ترجیح می دهد یکی از انواع سطح به طور برجسته تر ارائه شود.

برای مثال، می‌تواند به جلوگیری از اشتراک‌گذاری تصادفی کمک کند، زیرا اشتراک‌گذاری یک برگه می‌تواند پیش‌فرض باشد. اسکرین‌شات‌هایی از درخواست‌های انتخابگر رسانه قدیمی و جدید.

منابع مسدودکننده رندر را شناسایی کنید

بینش قابل اعتماد در مورد عملکرد یک صفحه برای توسعه دهندگان برای ایجاد تجربیات سریع کاربر بسیار مهم است، تا کنون توسعه دهندگان برای تعیین اینکه آیا یک منبع مسدود کننده رندر است یا خیر، بر اکتشافات پیچیده تکیه کرده اند.

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

قطعه کد در اینجا نشان می دهد که چگونه می توانید لیستی از تمام منابع خود را دریافت کنید و از ویژگی renderBlockingStatus جدید برای لیست کردن همه مواردی که رندر مسدود شده اند استفاده کنید.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

بهینه‌سازی نحوه بارگیری منابع به Core Web Vitals کمک می‌کند و با ارائه تجربه کاربری بهتر، اسناد MDN را بررسی کنید تا درباره Performance API بیشتر بدانید، به دنبال منابع مسدودکننده رندر و بهینه‌سازی بگردید.

آزمایش اولیه API PendingBeacon

PendingBeacon API اعلانی به مرورگر اجازه می دهد زمان ارسال بیکن ها را کنترل کند.

Beacon مجموعه ای از داده ها است که بدون انتظار پاسخ خاصی به یک سرور باطن ارسال می شود.

برنامه‌ها اغلب می‌خواهند این چراغ‌ها را در پایان بازدید کاربر ارسال کنند، اما زمان مناسبی برای برقراری تماس «ارسال» وجود ندارد. این API ارسال را به خود مرورگر محول می‌کند، بنابراین می‌تواند از بیکن‌ها در هنگام page unload یا page hide پشتیبانی کند، بدون اینکه توسعه‌دهنده مجبور باشد تماس‌های ارسال را دقیقاً در زمان‌های مناسب اجرا کند.

برای آزمایش اولیه ثبت نام کنید ، API را امتحان کنید و لطفاً بازخورد خود را برای بهبود موارد استفاده ارسال کنید.

و بیشتر!

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

  • هدر expect-ct http منسوخ شده است.
  • ویژگی rel اکنون در عناصر <form> پشتیبانی می شود.
  • آخرین باری که به درونیابی grid-template اشاره کردم، این بار باید گنجانده شود.

در ادامه مطلب

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

مشترک شوید

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

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