جدید در کروم 76

پیت لی پیج

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

من Pete LePage هستم، بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در Chrome 76 جدید است!

دکمه نصب PWA Omnibox

در Chrome 76، با افزودن یک دکمه نصب به نوار آدرس، که گاهی اوقات omnibox نامیده می‌شود، نصب برنامه‌های وب پیشرفته روی دسک‌تاپ را برای کاربران آسان‌تر می‌کنیم.

اگر سایت شما معیارهای نصب برنامه وب پیشرفته را داشته باشد، Chrome یک دکمه نصب را در omnibox نشان می دهد که به کاربر نشان می دهد که PWA شما قابل نصب است. اگر کاربر بر روی دکمه install کلیک کند، در اصل مانند فراخوانی prompt() در رویداد beforeinstallprompt است. این دیالوگ نصب را نشان می دهد و نصب PWA را برای کاربر آسان می کند.

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


کنترل بیشتر روی نوار اطلاعات کوچک PWA

نمونه ای از نوار اطلاعات کوچک افزودن به صفحه اصلی برای AirHorner

در تلفن همراه، Chrome نوار اطلاعات کوچک را اولین باری که کاربر از سایت شما بازدید می‌کند، در صورتی که معیارهای نصب برنامه وب پیشرفته را داشته باشد، نشان می‌دهد. ما از شما شنیده ایم که می خواهید بتوانید از نمایش نوار اطلاعات کوچک جلوگیری کنید و به جای آن تبلیغ نصب خود را ارائه دهید.

با شروع در Chrome 76، فراخوانی preventDefault() در رویداد beforeinstallprompt ظاهر شدن نوار اطلاعات کوچک را متوقف می کند.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

حتما رابط کاربری خود را به روز کنید - تا کاربران بدانند PWA شما قابل نصب است. الگوهای ترویج نصب PWA را برای بهترین روش‌های پیشنهادی ما برای ترویج نصب برنامه‌های وب پیشرو خود بررسی کنید.

به روز رسانی سریع تر WebAPK ها

وقتی یک برنامه وب پیشرفته در Android نصب می‌شود، Chrome به‌طور خودکار یک Web APK درخواست و نصب می‌کند. پس از نصب، Chrome به صورت دوره‌ای بررسی می‌کند که آیا مانیفست برنامه وب تغییر کرده است یا خیر، شاید نمادها، رنگ‌ها یا نام برنامه را تغییر داده باشید تا ببیند آیا به یک WebAPK جدید نیاز است یا خیر.

از Chrome 76، Chrome بیشتر مانیفست را بررسی می‌کند. چک کردن هر روز، به جای هر سه روز. اگر هر یک از ویژگی‌های کلیدی تغییر کرده باشد، Chrome یک WebAPK جدید درخواست و نصب می‌کند تا مطمئن شود عنوان، نمادها و سایر ویژگی‌ها به‌روز هستند.

برای جزئیات کامل به به روز رسانی WebAPK ها بیشتر مراجعه کنید.

حالت تاریک

اکنون بسیاری از سیستم عامل ها از حالت تاریک یا تم تیره پشتیبانی می کنند.

پرس و جوی رسانه ای prefers-color-scheme به شما امکان می دهد ظاهر و احساس سایت خود را مطابق با حالت ترجیحی کاربر تنظیم کنید.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

تام مقاله ای عالی دارد Hello darkness، دوست قدیمی من در web.dev با همه چیزهایی که باید بدانید، به علاوه نکاتی برای معماری شیت های خود برای پشتیبانی از حالت روشن و تاریک.

و بیشتر!

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

Promise.allSettled()

من شخصاً در مورد Promise.allSettled() بسیار هیجان زده هستم. شبیه Promise.all() است، با این تفاوت که صبر می کند تا همه وعده ها قبل از بازگشت تسویه شوند.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

خواندن حباب ها آسان تر است

Blob ها با سه روش جدید راحت تر خوانده می شوند: text() , arrayBuffer() و stream() ; این بدان معنی است که ما دیگر نیازی به ایجاد یک پوشش در اطراف فایل خوان نداریم!

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

پشتیبانی از تصویر در API کلیپ بورد async

و، ما پشتیبانی از تصاویر را به API ناهمزمان Clipboard اضافه کرده‌ایم که کپی و جای‌گذاری تصاویر را به‌صورت برنامه‌ریزی آسان می‌کند.

در ادامه مطلب

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

مشترک شوید

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

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