חדש ב-Chrome 79

פיט לפייג'
פיט לה פייג'
Twitter GitHub Glitch Mastodon דף הבית

Chrome 79 מושק עכשיו!

  • אפליקציות Progressive Web App שמותקנות ב-Android תומכות עכשיו בסמלים שניתנים למיסוך.
  • עכשיו אפשר ליצור חוויות תלת-ממדיות באמצעות WebXR Device API.
  • Wake Lock API זמין בתור גרסת מקור לניסיון.
  • המאפיין rendersubtree זמין כגרסת מקור לניסיון.
  • סרטונים מ-Chrome DevSummit זמינים עכשיו באינטרנט.
  • ודברים רבים נוספים.

אני Pete LePage, אז בוא נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 79!

סמלים שניתנים להתאמה

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

למרבה המזל, Chrome 79 תומך עכשיו בסמלים שניתנים למיסוך באפליקציות מותקנות מסוג Progressive Web App.תצטרכו לעצב את הסמל כך שיתאים לאזור הבטוח – בעיקר עיגול בקוטר שהוא 80% משטח ההדפסה.

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


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

ב-Tiger Oakes יש פוסט נהדר על טריקים של CSS – Maskable Icons: Android Adaptive Icons for Your PWA עם כל הפרטים. הוא כולל כלי נהדר שבעזרתו אפשר לבדוק את הסמלים ולוודא שהם מתאימים.

XR באינטרנט

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

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

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

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

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

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

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

תוכלו למצוא מידע נוסף על גרסאות מקור לניסיון במדריך לגרסאות מקור לניסיון. בדף גרסת המקור לניסיון של Chrome תוכלו לראות רשימה של גרסאות ניסיון מקוריות ולהירשם אליהן.

נעילה ליציאה ממצב שינה

אחד הדברים שמציעים חיית מחמד על 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 לשנת 2019

אם החמצתם את מפגש הפסגה של מפתחי Chrome, כל ההרצאות נמצאות בערוץ ה-YouTube שלנו.

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

קריאה נוספת

המאמר הזה מתייחס רק לחלק מההדגשים העיקריים. בדקו בקישורים שבהמשך שינויים נוספים ב-Chrome 78.

הרשמה

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

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