جدید در Chrome 107

Adriana Jara

آنچه باید بدانید:

من آدریانا جارا هستم. بیایید شروع کنیم و ببینیم چه چیزهای جدیدی برای توسعه‌دهندگان در 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 را نیز دارد. این ویژگی گزینه‌ای را برای کنترل برنامه‌ریزی‌شده اینکه آیا Chrome دکمه‌ای برای تعویض برگه‌ها درحین هم‌رسانی صفحه‌نمایش نشان دهد یا نه اضافه می‌کند. این گزینه‌ها به 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 و ارائه تجربه کاربری بهتر کمک می‌کند. برای کسب اطلاعات بیشتر درباره Performance API، اسناد MDN را بررسی کنید، منابع مسدودکننده پردازش را پیدا کنید، و آن‌ها را بهینه‌سازی کنید.

آزمایش معرفی ویژگی جدید PendingBeacon API

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

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

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

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

و غیره!

البته موارد بسیار بیشتری وجود دارد.

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

مطالعه بیشتر

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

مشترک شدن

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

من آدریانا جارا هستم و به‌محض انتشار Chrome 108، همین‌جا خواهم بود تا ویژگی‌های جدید Chrome را به شما بگویم!