ویژگی‌های جدید در Chrome 85

Pete LePage

‫Chrome 85 اکنون درحال عرضه به نسخه پایدار است.

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

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

رؤیت‌پذیری محتوا

فرایند پردازش مرورگرها

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

اعمال کردن content-visibility: auto روی عنصر به مرورگر می‌گوید که می‌تواند کار پرداز زدن آن عنصر را تا زمانی که به درگاه دید پیمایش شود کنار بگذارد و به این ترتیب، پرداز زدن اولیه سریع‌تری ارائه دهد.


.my-class {
  content-visibility: auto;
}

برای اینکه بیشترین تأثیر را از content-visibility بگیرید، آن را در بخش‌های والد با الگوریتم‌های چیدمان پیچیده‌تر، مثل flexbox و grid، یا بخش‌هایی که فرزندانی با چیدمان‌های محصورشده خودشان دارند اعمال کنید.

با تکه‌تکه کردن محتوا و افزودن content-visibility: auto;، این صفحه از زمان پردازشی ۲۳۲ میلی‌ثانیه به تنها ۳۰ میلی‌ثانیه رسید.

رؤیت‌پذیری محتوا را بررسی کنید تا ببینید چگونه می‌توانید از آن برای بهبود عملکرد پردازنده استفاده کنید.

‫@property و متغیرهای CSS

متغیرهای CSS که ازنظر فنی به آن‌ها دارایی‌های سفارشی گفته می‌شود، عالی هستند. با Houdini CSS Properties and Values API می‌توانید نوع و مقدار جایگزین پیش‌فرض را برای دارایی‌های سفارشی‌تان تعریف کنید. قبلاً در «موارد جدید در Chrome 78» به آن‌ها پرداخته بودم، زمانی که پشتیبانی از تعریف آن‌ها در جاوا اسکریپت را اضافه کردیم.

از Chrome 85 به بعد، می‌توانید ویژگی‌های CSS را نیز مستقیماً در CSS خود تعریف و تنظیم کنید. چیزی که درباره «دارایی‌های CSS» دوست دارم این است که به دارایی معنای معنایی، مقادیر جایگزین، و حتی امکان آزمایش CSS می‌دهد.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

«اُنا» پست فوق‌العاده‌ای دارد @property: دادن قدرت‌های ماورایی به متغیرهای CSS که به شما نشان می‌دهد چگونه می‌توانید از آن‌ها استفاده کنید.

دریافت برنامه‌های نصب‌شده مرتبط

میانای برنامه‌سازی کاربردی getInstalledRelatedApps() به شما امکان می‌دهد بررسی کنید که آیا برنامه شما نصب شده است یا نه، و سپس تجربه کاربر را سفارشی‌سازی کنید.

برای مثال، اگر برنامه شما ازقبل نصب شده است، محتوای متفاوتی را در صفحه مقصد به کاربر نشان دهید. عملکرد هم‌پوشانی را در یک برنامه متمرکز کنید تا از سردرگمی جلوگیری شود. یا اگر برنامه بومی‌تان ازقبل نصب شده است، نصب PWA را تبلیغ نکنید.

وقتی برای اولین‌بار در Chrome 80 عرضه شد، فقط برای برنامه‌های Android کار می‌کرد. اکنون در Android، این ویژگی می‌تواند بررسی کند که آیا «برنامه وب پیشرفته» شما نصب شده است یا نه. و در Windows، می‌تواند بررسی کند که برنامه Windows UWP شما نصب شده است یا نه.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

مقاله من را ببینید برنامه‌تان نصب شده است؟ getInstalledRelatedApps() به شما می‌گوید! در web.dev ببینید چگونه کار می‌کند و چگونه برنامه‌هایتان را امضا کنید تا ثابت کنید متعلق به شما است.

میان‌برهای نماد برنامه

میان‌بر نماد برنامه در Windows

در Chrome 84، پشتیبانی از «میان‌برهای نماد برنامه» را اضافه کردیم. من اشتباهاً گفتم که آن‌ها در همه جا دردسترس هستند، اما آن‌ها فقط در Android دردسترس بودند. اکنون در Chrome 85، این ویژگی‌ها در Android و Windows و در هر دو مرورگر Chrome و Edge دردسترس هستند.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

برای جزئیات کامل، مقاله میان‌برهای نماد برنامه را در web.dev بررسی کنید و بابت سردرگمی‌ای که ایجاد کردم عذرخواهی می‌کنم.

آزمایش معرفی ویژگی جدید: درخواست‌های جاری‌سازی با fetch()

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

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

برای مثال، از آن برای گرم کردن سرور یا جاری‌سازی صدا یا ویدیو درحین ضبط از میکروفون یا دوربین استفاده کنید.

جیک در درخواست‌های جاری‌سازی با fetch API در web.dev نگاهی دقیق دارد و همچنین در جدیدترین HTTP203 - درخواست‌های جاری‌سازی با fetch ویدیو آن را پوشش داده است.

و موارد دیگر

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

‫Promise.any قولی را برمی‌گرداند که با اولین قول داده‌شده برای برآورده شدن یا رد شدن برآورده می‌شود.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

با .replaceAll()، جایگزین کردن همه نمونه‌ها در رشته آسان‌تر است، دیگر نیازی به عبارات باقاعده نیست!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

‫Chrome 85 پشتیبانی از کدبندی AVIF را اضافه می‌کند، این قالب تصویر با AV1 کدبندی شده است و توسط Alliance for Open Media استانداردسازی شده است. ‫AVIF در مقایسه با JPEG و WebP، به‌طور قابل‌توجهی فشرده‌سازی بهتری ارائه می‌دهد، و مطالعه اخیر Netflix نشان می‌دهد که در مقایسه با JPEG استاندارد ۵۰٪ صرفه‌جویی و در محتوای 4:4:4 بیش‌از ۶۰٪ صرفه‌جویی دارد.

و برداشتن AppCache شروع شده است.

مطالعه بیشتر

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

مشترک شدن

اگر می‌خواهید از ویدیوهای ما مطلع شوید، در کانال YouTube «توسعه‌دهندگان Chrome» مشترک شوید تا هر زمان که ویدیو جدیدی منتشر می‌کنیم اعلان ایمیلی دریافت کنید.

من Pete LePage هستم و بالاخره موهایم را کوتاه کردم!

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