جدید در کروم 73

پیت لی پیج

در Chrome 73، ما پشتیبانی از موارد زیر را اضافه کرده‌ایم:

و خیلی چیزهای دیگر وجود دارد!

من پیت لی پیج هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 73 وجود دارد!

تغییر گزارش

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

برنامه های وب پیشرو در همه جا کار می کنند

برنامه های وب پیشرو تجربه ای قابل نصب و برنامه مانند را ارائه می دهند که مستقیماً از طریق وب ساخته و ارائه می شود. در Chrome 73، ما پشتیبانی از macOS را اضافه کرده‌ایم، که پشتیبانی از برنامه‌های وب پیشرفته را برای همه پلتفرم‌های دسکتاپ - Mac، Windows، ChromeOS و Linux، و همچنین موبایل، ارائه می‌کند و توسعه برنامه‌های وب را ساده می‌کند.

یک برنامه وب پیشرفته سریع و قابل اعتماد است. همیشه بدون در نظر گرفتن اتصال به شبکه، با سرعت یکسان بارگیری و اجرا می شود. آنها تجربیات غنی و جذابی را از طریق ویژگی های وب مدرن ارائه می دهند که از قابلیت های دستگاه بهره کامل می برد.

کاربران می‌توانند PWA شما را از منوی زمینه Chrome نصب کنند، یا می‌توانید مستقیماً تجربه نصب را با استفاده از رویداد beforeinstallprompt ارتقا دهید. پس از نصب، یک PWA با سیستم عامل ادغام می شود تا مانند یک برنامه بومی رفتار کند: کاربران آنها را از همان مکان برنامه های دیگر پیدا کرده و راه اندازی می کنند، آنها در پنجره خودشان اجرا می شوند، در Task switcher ظاهر می شوند، نمادهای آنها می توانند نشان اعلان را نشان دهند. و غیره

ما می خواهیم شکاف قابلیت بین وب و بومی را ببندیم تا پایه ای محکم برای برنامه های کاربردی مدرن ارائه شده در وب فراهم کنیم. ما در حال کار برای افزودن قابلیت‌های جدید پلتفرم وب هستیم که به شما امکان دسترسی به مواردی مانند سیستم فایل ، wake lock ، افزودن یک نشان محیطی به نوار آدرس را می‌دهد تا کاربران بدانند PWA شما می‌تواند نصب شود، نصب خط‌مشی برای شرکت‌ها، و موارد دیگر. .

اگر در حال ساخت یک PWA موبایل هستید، PWA دسکتاپ تفاوتی ندارد. در واقع، اگر از طراحی ریسپانسیو استفاده کرده اید، احتمالاً از قبل شروع به کار کرده اید. پایگاه کد واحد شما در دسکتاپ و موبایل کار خواهد کرد. اگر به تازگی شروع به کار با PWA کرده اید، از اینکه ساختن آنها چقدر آسان است شگفت زده خواهید شد!

  1. مانیفست اضافه کنید
  2. مجموعه ای از آیکون ها را ایجاد کنید
  3. یک کارگر سرویس دیگ بخار اضافه کنید

سپس، از آنجا تکرار کنید.

صرافی های HTTP امضا شده

Signed HTTP Exchanges (SXG)، بخشی از یک فناوری نوظهور به نام بسته‌های وب ، اکنون در Chrome 73 در دسترس است. یک تبادل HTTP امضا شده، ایجاد محتوای «قابل حمل» را که می‌تواند توسط طرف‌های دیگر ارائه شود، ممکن می‌سازد، و این جنبه کلیدی است، یکپارچگی و انتساب سایت اصلی را حفظ می کند.

بورس امضا شده: ذات

این کار منشأ محتوا را از سروری که آن را ارائه می‌کند جدا می‌کند، اما چون امضا شده است، مانند این است که از سرور شما تحویل داده می‌شود. وقتی مرورگر این Signed Exchange را بارگیری می‌کند، می‌تواند با خیال راحت URL شما را در نوار آدرس نشان دهد زیرا امضای موجود در صرافی نشان می‌دهد که محتوا در اصل از مبدا شما آمده است.

صرافی‌های HTTP امضا شده، تحویل سریع‌تر محتوا را برای کاربران امکان‌پذیر می‌سازد، و این امکان را فراهم می‌کند که از مزایای CDN بدون نیاز به واگذاری کنترل کلید خصوصی گواهی‌تان استفاده کنید. تیم AMP در حال برنامه ریزی برای استفاده از تبادل HTTP امضا شده در صفحات نتایج جستجوی Google برای بهبود URL های AMP و افزایش سرعت کلیک بر روی نتایج جستجو است.

برای جزئیات در مورد نحوه شروع، پست تبادل HTTP امضا شده Kinuko را بررسی کنید.

استایل شیت های قابل ساخت

صفحات سبک ساختنی، جدید در Chrome 73، روش جدیدی را برای ایجاد و توزیع سبک‌های قابل استفاده مجدد در اختیار ما قرار می‌دهد، که به ویژه هنگام استفاده از Shadow DOM مهم است.

ایجاد شیوه نامه با استفاده از جاوا اسکریپت همیشه امکان پذیر بوده است. با استفاده از document.createElement('style') یک عنصر <style> ایجاد کنید. سپس به ویژگی sheet آن دسترسی پیدا کنید تا به نمونه CSSStyleSheet زیرین مراجعه کنید و استایل را تنظیم کنید.

نمودار آماده سازی و کاربرد CSS را نشان می دهد

استفاده از این روش منجر به نفخ استایل شیت می شود. حتی بدتر، باعث فلش محتوای بدون استایل می شود. Stylesheets ساختنی این امکان را فراهم می کند که سبک های CSS مشترک را تعریف و آماده کنید و سپس آن استایل ها را بر روی چندین Shadow Roots یا Document به راحتی و بدون تکرار اعمال کنید.

به‌روزرسانی‌های یک CSSStyleSheet به اشتراک‌گذاشته‌شده برای همه ریشه‌هایی اعمال می‌شود که در آن‌جا مورد پذیرش قرار گرفته‌اند، و پذیرش یک stylesheet پس از بارگیری صفحه، سریع و همزمان است.

شروع کار ساده است، یک نمونه جدید از CSSStyleSheet ایجاد کنید، سپس از replace یا replaceSync برای به روز رسانی قوانین صفحه سبک استفاده کنید.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

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

و بیشتر!

اینها تنها تعدادی از تغییرات کروم 73 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.

  • matchAll() یک روش تطبیق عبارات منظم جدید در نمونه اولیه رشته است و یک آرایه حاوی تطابق کامل را برمی گرداند.
  • عنصر <link> اکنون imagesrcset پشتیبانی می‌کند و ویژگی‌های imagesizes را مطابق با ویژگی‌های srcset و sizes HTMLImageElement می‌کند.
  • اجرای شعاع تاری سایه Blink اکنون با فایرفاکس و سافاری مطابقت دارد.
  • حالت تاریک برای رابط کاربری کروم اکنون در مک پشتیبانی می شود و پشتیبانی از ویندوز در راه است. علاوه بر این، روی یک پرسش رسانه CSS کار می‌شود: prefers-color-scheme ، که می‌تواند برای تشخیص اینکه آیا کاربر از سیستم درخواست کرده است که از یک تم رنگ روشن یا تیره استفاده کند، استفاده می‌شود. اشکال ردیابی برای این ویژگی افزودن پشتیبانی برای CSS prefers-color-scheme media ویژگی برای کروم و فایرفاکس است.

اشتراک در

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

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