חדש ב-Chrome 79

Pete LePage

אנחנו משיקים עכשיו את Chrome 79.

קוראים לי Pete LePage, ועכשיו נצלול פנימה ונראה מה חדש למפתחים בגרסה 79 של Chrome.

סמלים שניתן להתאים (maskable)

אם אתם משתמשים ב-Android O ואילך והתקנתם אפליקציית Progressive Web App, סביר להניח שראיתם את העיגול הלבן המטריד סביב הסמל.

למרבה המזל, ב-Chrome 79 יש עכשיו תמיכה בסמלים שניתן להסתיר באפליקציות אינטרנט מתקדמות (PWA) מותקנות.תצטרכו לעצב את הסמל כך שיתאים לאזור הבטוח – למעשה, עיגול בקוטר של 80% מהלוח.

לאחר מכן, במניפסט של אפליקציית האינטרנט, צריך להוסיף לסמל נכס purpose חדש ולהגדיר את הערך שלו כ-maskable.


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

Tiger Oakes פרסם פוסט מצוין ב-CSS Tricks – סמלים שניתן להסתיר: סמלים מותאמים ל-Android לאפליקציות ה-PWA שלכם עם כל הפרטים, וגם כלי מצוין שבעזרתו אפשר לבדוק את הסמלים כדי לוודא שהם יתאימו.

Web XR

עכשיו אפשר ליצור חוויות immersive לסמארטפונים ולמסכים שמרכיבים על הראש באמצעות WebXR Device API.

WebXR מאפשר מגוון רחב של חוויות סוחפות. החל משימוש במציאות רבודה כדי לראות איך ספה חדשה תיראה בבית לפני שקונים אותה, ועד למשחקי מציאות מדומה, סרטים ב-360 מעלות ועוד.

כדי להתחיל להשתמש ב-API החדש, כדאי לקרוא את המאמר מציאות מדומה מגיעה לאינטרנט.

גרסאות מקור חדשות לניסיון

תוכניות הניסוי במקור מאפשרות לנו לאמת תכונות ו-API ניסיוניים, ומאפשרות לכם לספק משוב על נוחות השימוש בהם ועל היעילות שלהם בפריסה רחבה יותר.

בדרך כלל, תכונות ניסיוניות זמינות רק באמצעות דגל, אבל כשאנחנו מציעים גרסת Origin Trial של תכונה מסוימת, אפשר להירשם לגרסת Origin Trial הזו כדי להפעיל את התכונה לכל המשתמשים במקור.

כשאתם בוחרים בגרסת ניסיון למקור, אתם יכולים ליצור תוכנות הדגמה ותוכנות אב שמשתמשי גרסת הבטא יוכלו לנסות במשך תקופת הניסיון, בלי שתצטרכו לבקש מהם להפעיל דגלים מיוחדים ב-Chrome.

מידע נוסף על ניסויים במקור זמין במדריך לניסויים במקור למפתחי אתרים. בדף Chrome Origin Trials אפשר לראות רשימה של ניסויים פעילים במקור ולהירשם אליהם.

Wake Lock

אחד הדברים שמרגיזים אותי ב-Google Slides הוא שאם משאירים את המצגת פתוחה שקופית אחת למשך זמן רב מדי, מסך השומר מופעל. כדי להמשיך, צריך לבטל את נעילת המחשב. אוי.

עם זאת, באמצעות Wake Lock API החדש, דף יכול לבקש נעילה ולמנוע את עמעום המסך או הפעלת שומר המסך. ההגדרה הזו מושלמת ל-Slides, אבל היא גם שימושית באתרים עם מתכונים – במקרים כאלה, כדאי להשאיר את המסך דולק בזמן שמבצעים את ההוראות.

כדי לבקש נעילת התעוררות, צריך להפעיל את 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 שלנו.

ל-Jake יש גם שרשור נהדר ב-Twitter עם כל הדברים המצחיקים שהתרחשו בין ההרצאות, כולל החבר החדש ביותר בצוות שלנו, Surjiko.

קריאה נוספת

כאן מפורטות רק חלק מהנקודות העיקריות. בקישור הבא מפורטים שינויים נוספים ב-Chrome 78.

להרשמה

רוצים להתעדכן בסרטונים שלנו? הירשמו לערוץ YouTube של מפתחי Chrome ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 80 תפורסם, אספר לכם מה חדש ב-Chrome.