חדש ב-Chrome 96

Pete LePage

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

קוראים לי Pete LePage, ואני סוף סוף מצלם בסטודיו. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 96.

מניפסט id לאפליקציות PWA

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

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

הוספת המאפיין id למניפסט מסירה את התלות ב-start_url או במיקום של המניפסט, ומאפשרת לעדכן את השדות האלה.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

התמיכה בנכס id תגיע לדפדפנים מבוססי Chromium למחשבים החל מגרסה 96 של Chrome. התמיכה בנייד, שבה נעשה כרגע שימוש בכתובת ה-URL של המניפסט בתור המזהה הייחודי, אמורה להיכנס לתוקף במחצית הראשונה של שנת 2022.

כלי הפיתוח שבו מוצג מזהה האפליקציה הממוחשבת

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

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

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

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

רכיבי handler של פרוטוקול כתובת URL ל-PWA

אפליקציות אינטרנט יכולות להשתמש ב-navigator.registerProtocolHandler() כדי להירשם כ-handler של פרוטוקול. לדוגמה, Gmail יכול לרשום את פרוטוקול mailto. לאחר מכן, כשמשתמש לוחץ על קישור עם הקידומת mailto:, נפתח Gmail, ומאפשר למשתמש לשלוח אימייל בקלות.

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

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

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

רמזים לגבי תעדוף (גרסת מקור לניסיון)

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

'רמזים לגבי תעדוף' היא תכונה ניסיונית שזמינה כגרסת מקור לניסיון החל מגרסת Chrome 96, והיא יכולה לעזור לבצע אופטימיזציה של מדדי Core Web Vitals. המאפיין importance מאפשר לציין את העדיפות של סוגי משאבים כמו CSS, גופנים, סקריפטים, תמונות ו-iframe.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

לדוגמה, זהו הדף של Google חיפוש טיסות. תמונת הרקע הזו היא רכיב התוכן הכי גדול שהוצג (LCP).

צילום מסך של Google חיפוש טיסות עם תמונת רקע גדולה

נראה איך הוא נטען עם רמזים לעדיפות ואיך בלי רמזים לעדיפות. כשהעדיפות מוגדרת כ-high בתמונת הרקע, זמן ה-LCP יורד מ-2.6 שניות ל-1.9 שניות.

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

הדמיה של Chrome 100 במחרוזת UA

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

החל מגרסת Chrome 96, יש דגל חדש #force-major-version-to-100 שמשמש לשינוי מספר הגרסה הנוכחי ל-100, כדי שתוכלו לוודא שהכל פועל כצפוי.

דף של דגלים ב-Chrome שמודגשת בו האפשרות החדשה #force-major-version-to-100

פרטים נוספים זמינים במאמר אילוץ הגרסה הראשית של Chrome ל-100 במחרוזת User-Agent.

Chrome Dev Summit

מכנס Chrome Dev Summit הסתיים. כל הסרטונים והתוכן זמינים אונליין. אתם יכולים להיכנס לאתר של Chrome Dev Summit. אם פספסתם את ההרצאה הראשית או את השידור החי, תוכלו לצפות בפלייליסט של CDS בערוץ YouTube למפתחי Chrome.

ועוד.

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

  • המטמון 'הקודם, הבא' – או bfcache – זמין עכשיו בגרסה היציבה, והוא מביא את Chrome לסטטוס זהה לזה של Firefox ו-Safari.

קריאה נוספת

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

להרשמה

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

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