جدید در کروم 93

پیت لی پیج

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

  • اکنون می‌توانید برگه‌های سبک CSS را با عبارت‌های import بارگذاری کنید، درست مانند ماژول‌های جاوا اسکریپت.
  • PWA های نصب شده می توانند به عنوان کنترل کننده URL ثبت شوند و این امکان را برای کاربران فراهم می کند که مستقیماً به PWA شما بپرند.
  • API قرار دادن پنجره چند صفحه‌ای بر اساس بازخورد شما به‌روزرسانی شده است و یک آزمایش اولیه اولیه را شروع می‌کند.
  • اجلاس سران PWA در 6 تا 7 اکتبر برگزار می شود.
  • و چیزهای بیشتری وجود دارد.

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

اسکریپت های ماژول CSS

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

ویژگی جدید CSS Module Scripts برای عناصر سفارشی عالی است. و بر خلاف روش های دیگر استفاده از CSS از جاوا اسکریپت، نیازی به ایجاد عناصر یا درهم ریختن رشته های جاوا اسکریپت متن CSS نیست.

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

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

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

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

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;
  }
});

برای غواصی عمیق‌تر، مقاله Tom's Managing Disa displays with Multi-Screen Window Placement API را در web.dev بررسی کنید.

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

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

آن زمان فرا رسیده است و کروم 94 را در 21 سپتامبر ارسال خواهیم کرد. می توانید تاریخ انتشار برنامه ریزی شده برای هر نسخه را در تقویم Chrome پیدا کنید.

ویژگی های جدید PWA

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

کنترل کننده های URL برای PWA ها

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

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

نمونه 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/*"]
      }
    }
  ]
}

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

تمام جزئیات مربوط به آزمایش اولیه در PWA به عنوان مدیریت کننده URL در web.dev موجود است.

پوشش کنترل های پنجره

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

می توانید از این ویژگی استفاده کنید تا PWA نصب شده خود را بیشتر شبیه سایر برنامه های نصب شده کنید.

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

نشست PWA

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

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

و بیشتر!

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

  • موارد Flexbox و flexbox پشتیبانی از کلیدواژه های تراز را اضافه کرده اند: start ، end ، self-start ، self-end ، left و right .
  • API کلیپ بورد async اکنون از فایل های 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 93 پیوندهای زیر را بررسی کنید.

مشترک شوید

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

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