חדש ב-Chrome 85

Pete LePage

ההשקה של Chrome 85 לגרסה היציבה מתחילה עכשיו.

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

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

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

תהליך הרינדור בדפדפנים

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

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


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

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

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

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

‫@property ומשתני CSS

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

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

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

בפוסט המעולה של אונה @property: איך משתמשים במשתני CSS מוסבר איך אפשר להשתמש בהם.

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

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

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

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

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,
});

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

במאמר Streaming requests with the fetch API באתר web.dev, ג'ייק מסביר לעומק על בקשות סטרימינג באמצעות fetch API. הוא גם מסביר על כך בסרטון האחרון HTTP203 - Streaming requests with fetch.

ועוד

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

‫Promise.any מחזירה אובייקט promise שמושלם על ידי אובייקט ה-promise הראשון שניתן להשלמה או לדחייה.

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 שנערך לאחרונה, נמצא שפורמט AVIF חוסך 50% בהשוואה ל-JPEG רגיל, ויותר מ-60% בתוכן בפורמט 4:4:4.

בנוסף, התחלנו להסיר את AppCache.

קריאה נוספת

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

הרשמה

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

קוראים לי פיט לה-פייג', וסוף סוף הסתפרתי!

ברגע שגרסה Chrome 86 תושק, אעדכן אותך כאן לגבי החידושים ב-Chrome.