חדש ב-Chrome 96

Pete LePage

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

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

קובץ המניפסט id ל-PWA

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

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

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

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

התמיכה בנכס id זמינה בדפדפנים מבוססי-Chromium למחשבים שמופעלים החל מ-Chrome 96. התמיכה בניידים, שכרגע משתמשת בכתובת ה-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"
    }
  ]
}

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

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

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

טיפים בעדיפות גבוהה הם תכונה ניסיונית שזמינה כגרסת מקור לניסיון החל מ-Chrome 96, והיא יכולה לעזור באופטימיזציה של מדדי ליבה לבדיקת חוויית המשתמש באתר. המאפיין 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).

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

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

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

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

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

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

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

מידע נוסף מופיע במאמר אילוץ הגרסה הראשית של Chrome לערך 100 במחרוזת ה-User-Agent.

מפגש הפסגה של מפתחי Chrome

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

ופעולות נוספות.

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

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

קריאה נוספת

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

להרשמה

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

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