جدید در کروم 79

پیت لی پیج

Chrome 79 اکنون در حال عرضه است!

  • برنامه های وب پیشرفته نصب شده در اندروید اکنون از نمادهای قابل ماسک پشتیبانی می کنند.
  • اکنون می‌توانید با WebXR Device API تجربه‌های همهجانبه‌ای ایجاد کنید.
  • Wake Lock API به صورت آزمایشی اصلی در دسترس است.
  • ویژگی rendersubtree به عنوان یک آزمایش اولیه در دسترس است.
  • ویدیوهای Chrome DevSummit اکنون آنلاین هستند.
  • و خیلی بیشتر.

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

آیکون های ماسک پذیر

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

خوشبختانه، Chrome 79 اکنون از نمادهای ماسک‌پذیر برای برنامه‌های وب پیشرفته نصب شده پشتیبانی می‌کند. باید نماد خود را طوری طراحی کنید که در منطقه امن قرار بگیرد - اساساً دایره‌ای با قطری که 80٪ از بوم را تشکیل می‌دهد.

سپس، در مانیفست برنامه وب، باید یک ویژگی purpose جدید را به نماد اضافه کنید و مقدار آن را روی maskable تنظیم کنید. 


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes یک پست عالی در CSS Tricks - Maskable Icons: Android Adaptive Icons for Your PWA با تمام جزئیات دارد و یک ابزار عالی دارد که می توانید برای آزمایش آیکون های خود استفاده کنید تا مطمئن شوید که مناسب هستند.

وب XR

اکنون می‌توانید با WebXR Device API تجربه‌های همهجانبه‌ای برای گوشی‌های هوشمند و نمایشگرهای روی سر ایجاد کنید.

WebXR طیف کاملی از تجربیات همهجانبه را امکان پذیر می کند. از استفاده از واقعیت افزوده برای دیدن اینکه یک کاناپه جدید قبل از خرید در خانه شما چگونه به نظر می رسد، تا بازی های واقعیت مجازی و فیلم های 360 درجه و موارد دیگر.

برای شروع با API جدید، واقعیت مجازی به وب می‌آید را بخوانید.

آزمایشات منشاء جدید

آزمایش‌های مبدأ فرصتی را برای ما فراهم می‌کند تا ویژگی‌های آزمایشی و APIها را تأیید کنیم، و این امکان را برای شما فراهم می‌کند که درباره قابلیت استفاده و اثربخشی آنها در استقرار گسترده‌تر بازخورد ارائه کنید.

ویژگی‌های آزمایشی معمولاً فقط پشت پرچم در دسترس هستند، اما زمانی که ما نسخه آزمایشی مبدأ را برای یک ویژگی ارائه می‌دهیم، می‌توانید برای آن آزمایش اولیه ثبت نام کنید تا این ویژگی برای همه کاربران در مبدا خود فعال شود.

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

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

ویک لاک

یکی از بزرگ‌ترین نگرانی‌های من درباره Google Slides این است که اگر عرشه را برای مدت طولانی روی یک اسلاید باز بگذارید، محافظ صفحه نمایش وارد می‌شود. قبل از اینکه بتوانید ادامه دهید، باید قفل رایانه خود را باز کنید. اوه

اما، با API جدید Wake Lock، یک صفحه می‌تواند درخواست قفل کند و از کم‌نور شدن صفحه یا فعال شدن محافظ صفحه جلوگیری کند. این برای اسلایدها عالی است، اما برای مواردی مانند سایت‌های دستور پخت نیز مفید است - جایی که ممکن است بخواهید آن را نگه دارید. در حالی که دستورالعمل ها را دنبال می کنید، صفحه نمایش روشن می شود.

برای درخواست wake lock، باید navigator.wakeLock.request() را فراخوانی کنید و شی WakeLockSentinel را که برمی گرداند ذخیره کنید.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

قفل تا زمانی که کاربر از صفحه دور شود حفظ می‌شود، یا شما release روی شی WakeLockSentinel که قبلاً ذخیره کرده‌اید فراخوانی کنید.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

جزئیات بیشتر در web.dev/wakelock هستند.

ویژگی rendersubtree

مواقعی وجود دارد که نمی خواهید بخشی از DOM بلافاصله رندر شود. به‌عنوان مثال، اسکرول‌هایی با حجم زیادی محتوا، یا رابط‌های کاربری زبانه‌دار که در آن‌ها فقط بخشی از محتوا در هر زمان قابل مشاهده است.

ویژگی rendersubtree جدید به مرورگر می‌گوید که می‌تواند از رندر کردن آن زیر درخت صرف نظر کند. این به مرورگر اجازه می دهد تا زمان بیشتری را برای پردازش بقیه صفحه صرف کند و عملکرد را افزایش دهد.

هنگامی که rendersubtree روی invisible تنظیم می‌شود، محتوای عنصر ترسیم یا تست نمی‌شود و امکان بهینه‌سازی رندر را فراهم می‌کند.

تغییر rendersubtree به activatable ، محتوا را با حذف ویژگی invisible و رندر کردن محتوا قابل مشاهده می کند.

Chrome Dev Summit 2019

اگر جلسه Chrome Dev Summit را از دست دادید، همه گفتگوها در کانال YouTube ما هستند.

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

در ادامه مطلب

این تنها برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 78 پیوندهای زیر را بررسی کنید.

مشترک شوید

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

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