جدید در Chrome 93

Pete LePage

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

  • اکنون می‌توانید شیوه‌نامه‌های CSS را با import عبارت بار کنید، درست مثل ماژول‌های جاوا اسکریپت.
  • برنامه‌های وب پیش‌رو نصب‌شده می‌توانند به‌عنوان مدیریت‌كننده نشانی وب ثبت شوند، که این امر امکان پرش مستقیم کاربران به برنامه وب پیش‌رو شما را فراهم می‌کند.
  • Multi-Screen Window Placement API براساس بازخورد شما به‌روزرسانی شده است و دومین آزمایش معرفی ویژگی جدید را شروع می‌کند.
  • اجلاس PWA در ۶ و ۷ اکتبر برگزار می‌شود.
  • و بسیاری موارد دیگر.

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

اسکریپت‌های واحد CSS

اکنون می‌توانید شیوه‌نامه‌های CSS را با عبارت‌های import بار کنید، درست مثل مدول‌های جاوا اسکریپت. سپس می‌توان برگه‌های سبک نگارش را به همان روش برگه‌های سبک نگارش قابل‌ساخت به سند یا ریشه‌های سایه اعمال کرد.

ویژگی جدید CSS Module Scripts برای عناصر سفارشی عالی است. And unlike other ways of applying CSS from JavaScript, there is no need to create elements, or mess with JavaScript strings of CSS text.

برای استفاده از آن، برگه سبک را با assert {type: 'css'} وارد کنید، سپس آن را با فراخوانی adoptedStyleSheets در document یا shadowRoot اعمال کنید.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

اما مراقب باشید، اگر assert را حذف کنید، فایل به‌عنوان جاوا اسکریپت درنظر گرفته می‌شود و کار نخواهد کرد!

برای جزئیات کامل، استفاده از CSS Module Scripts برای وارد کردن برگه سبک نگارش را در web.dev ببینید.

Multi-Screen Window Placement API

برای برخی‌از برنامه‌ها، باز کردن پنجره‌های جدید و قرار دادن آن‌ها در مکان‌های خاص یا نمایشگرهای خاص ویژگی مهمی است. برای مثال، وقتی از «اسلایدنگار» برای ارائه استفاده می‌کنم، می‌خواهم اسلایدها به‌صورت تمام‌صفحه در نمایشگر اصلی نشان داده شوند و یادداشت‌های گوینده در نمایشگر دیگر نشان داده شوند.

‫Multi-Screen Window Placement API امکان شمارش نمایشگرهای متصل به دستگاه کاربر و قرار دادن پنجره‌ها در صفحه‌های خاص را فراهم می‌کند. این دومین آزمایش معرفی ویژگی جدید است و ما براساس بازخورد شما تغییراتی ایجاد کرده‌ایم.

می‌توانید به‌سرعت بررسی کنید که آیا بیش‌از یک صفحه‌نمایش به دستگاه متصل است یا نه:

const isExtended = window.screen.isExtended;
// returns true/false

اما عملکرد کلیدی در window.getScreens() است که همه جزئیات مربوط به نمایشگرهای متصل را ارائه می‌دهد.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

برای مثال، می‌توانید صفحه اصلی را تعیین کنید، سپس از requestFullscreen() برای نمایش عنصر در آن صفحه استفاده کنید.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

و راهی برای گوش دادن به تغییرات ارائه می‌دهد، مثلاً اگر نمایشگر جدیدی وصل یا جدا شود.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

برای کسب اطلاعات بیشتر، مقاله تام را با عنوان مدیریت چند نمایشگر با Multi-Screen Window Placement API در web.dev بررسی کنید.

چرخه انتشار کوتاه‌شده

در ماه مارس، برنامه‌هایمان را برای کوتاه کردن چرخه انتشار و عرضه نسخه جدید Chrome هر چهار هفته یکبار اعلام کردیم.

آن زمان فرا رسیده است و ما Chrome 94 را در ۲۱ سپتامبر عرضه خواهیم کرد. می‌توانید تاریخ‌های انتشار برنامه‌ریزی‌شده برای هر نسخه را در تقویم Chrome پیدا کنید.

ویژگی‌های جدید «برنامه وب پیش‌رو»

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

مدیریت‌كننده‌های نشانی وب برای برنامه‌های وب پیش‌رو

اگر «برنامه وب پیش‌رو» نصب کرده باشید و روی پیوندی به آن «برنامه وب پیش‌رو» کلیک کنید، احتمالاً می‌خواهید در «برنامه وب پیش‌رو» باز شود، نه در زبانه مرورگر.

با مشخص کردن url_handlers در مانیفست برنامه وب و افزودن فایل web-app-origin-association به دایرکتوری .well-known/، می‌توانید به مرورگر بگویید که اگر کاربر روی پیوندی به برنامه وب پیشرو شما کلیک کرد، آن پیوند باید در برنامه وب پیشرو نصب‌شده باز شود.

نمونه url_handlers در فایل manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

نمونه فایل web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

و با کمی درستی‌سنجی بیشتر، حتی می‌توانید کاری کنید که «برنامه وب پیشرو» شما پیوندهای سایر مبدأهای تحت مالکیت شما را مدیریت کند.

همه جزئیات مربوط به آزمایش معرفی ویژگی جدید در PWAs as URL Handlers در web.dev موجود است.

رونهاد کنترل‌های پنجره

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

می‌توانید از این ویژگی استفاده کنید تا «برنامه وب پیش‌رو» نصب‌شده‌تان بیشتر شبیه سایر برنامه‌های نصب‌شده به‌نظر برسد.

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

PWA Summit

اجلاس PWA در ماه اکتبر برگزار می‌شود. این کنفرانس آنلاین رایگان بر کمک به موفقیت همه با «برنامه‌های وب پیش‌رو» تمرکز دارد. «اجلاس برنامه وب پیش‌رو» حاصل همکاری بین افرادی از چند شرکت مختلف است که در ایجاد فناوری‌های «برنامه وب پیش‌رو» مشارکت دارند: Google،‏ Intel،‏ Microsoft، و Samsung.

محتوا و گفتگوهای عالی زیادی وجود دارد. می‌توانید در PWASummit.org اطلاعات بیشتری کسب کنید و ثبت‌نام کنید.

و موارد دیگر!

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

  • Flexbox و موارد flexbox پشتیبانی از کلیدواژه‌های تراز را اضافه کرده‌اند: start، end، self-start، self-end، left، و right.
  • میانای برنامه‌سازی کاربردی بریده‌دان ناهمگام اکنون از فایل‌های SVG پشتیبانی می‌کند.
  • و هنگام تنظیم meta theme-color، مشخصه media رعایت خواهد شد، بنابراین می‌توانید رنگ‌های زمینه متفاوتی برای حالت‌های روشن و تیره مشخص کنید.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

مطالعه بیشتر

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

مشترک شدن

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

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