חדש ב-Chrome 85

Pete LePage

אנחנו מתחילים להשיק את הגרסה היציבה של Chrome 85.

דברים שעליך לדעת:

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

חשיפה של התוכן

תהליך העיבוד של הדפדפנים

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

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


.my-class {
  content-visibility: auto;
}

כדי להפיק את המקסימום מהאפשרות content-visibility, כדאי להחיל אותה על קטעי אם עם אלגוריתמים מורכבים יותר של פריסה, כמו flexbox ו-grid, או על קטעי אם שיש להם קטעי צאצא עם פריסות נפרדות משלהם.

חלוקת התוכן לקטעים והוספת content-visibility: auto; הפחיתו את זמן העיבוד של הדף מ-232 אלפיות השנייה ל-30 אלפיות השנייה בלבד.

כדאי לעיין בחשיפה של התוכן כדי לראות איך אפשר להשתמש בה כדי לשפר את ביצועי הרינדור.

@property ומשתני CSS

משתני CSS, שנקראים באופן טכני מאפיינים מותאמים אישית, הם נהדרים. באמצעות Houdini CSS Properties and Values API, אפשר להגדיר סוג וערך ברירת מחדל למאפיינים מותאמים אישית. תיארתי אותם בעבר במאמר מה חדש בגרסה 78 של Chrome, כשהוסיפה תמיכה בהגדרתם ב-JavaScript.

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

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una כתבה פוסט מעולה @property: giving superpowers to CSS variables שמראה איך אפשר להשתמש בהן.

הצגת אפליקציות קשורות שהותקנו

באמצעות ה-API של getInstalledRelatedApps(), אתם יכולים לבדוק אם האפליקציה של כם מותקנת, ואז להתאים אישית את חוויית המשתמש.

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

כשהתכונה הושקה לראשונה ב-Chrome 80, היא פעלה רק באפליקציות ל-Android. עכשיו, ב-Android, אפשר גם לבדוק אם אפליקציית ה-PWA מותקנת. וגם ב-Windows, הוא יכול לבדוק אם אפליקציית UWP של Windows מותקנת.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

מומלץ לקרוא את המאמר שלי האפליקציה מותקנת? getInstalledRelatedApps() יסביר לכם! ב-web.dev תוכלו לראות איך זה עובד ואיך לחתום על האפליקציות כדי להוכיח שהן שלכם.

קיצורי דרך של סמלי אפליקציות

קיצור דרך לסמל האפליקציה ב-Windows

ב-Chrome 84 הוספנו תמיכה בקיצורי דרך לסמל האפליקציה. בטעות אמרתי שהן זמינות בכל מקום, אבל הן זמינות רק ב-Android. עכשיו, ב-Chrome 85, התכונות האלה זמינות ב-Android וב-Windows, וגם ב-Chrome וב-Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

פרטים מלאים זמינים במאמר קיצורי דרך לסמל האפליקציה ב-web.dev. סליחה על הבלבול שגרמתי.

גרסת מקור לניסיון: בקשות סטרימינג באמצעות fetch()

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

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

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

ג'ייק כתב סקירה מעמיקה בנושא שליחת בקשות בסטרימינג באמצעות Fetch API ב-web.dev, וענה על הנושא גם בסרטון האחרון שלו בנושא HTTP203 – שליחת בקשות בסטרימינג באמצעות Fetch.

ועוד

כמובן, יש עוד הרבה.

הפונקציה Promise.any מחזירה הבטחה שתתבצע על ידי ההבטחה הראשונה שניתנה שתתבצע או תידחה.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

החלפת כל המופעים במחרוזת קלה יותר באמצעות .replaceAll(), בלי ביטויים רגולריים!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

ב-Chrome 85 נוספה תמיכה בפענוח של AVIF, פורמט תמונות שמקודד באמצעות AV1 ועומד בתקן של Alliance for Open Media. פורמט AVIF מציע שיפור משמעותי בדחיסת הנתונים בהשוואה ל-JPEG ול-WebP. מחקר של Netflix שפורסם לאחרונה הראה חיסכון של 50% בהשוואה ל-JPEG רגיל וחיסכון של יותר מ-60% בתוכן 4:4:4.

וגם התחילה ההסרה של AppCache.

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפיי (Pete LePage) ואני סוף סוף הסתפרתי!

ברגע שגרסת Chrome 86 תשוחרר, אספר לכם מה חדש ב-Chrome.