דברים שעליך לדעת:
- המאפיין
id
במניפסט מאפשר לציין מזהה ייחודי ל-PWA. - המאפיין
protocol_handlers
מאפשר לרשום את ה-PWA באופן אוטומטי כ-handler של פרוטוקול בזמן ההתקנה. - גרסת המקור לניסיון של הרמזים בעדיפות גבוהה מאפשרת לציין עדיפות שליפה להורדת משאבים.
- ניתן לאלץ את גרסת Chrome ל-100 כדי לבדוק איך הקוד יגיב למספר גרסה בן שלוש ספרות.
- הסרטונים מכנס מפתחי Chrome זמינים כולם באינטרנט.
- ויש הרבה עוד.
אני פיט 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).
בואו נראה שהוא טעון עם, וללא רמזים לעדיפות. כשתמונת הרקע מוגדרת עדיפות ל-high
, מדד ה-LCP יורד מ-2.6 שניות ל-1.9 שניות.
כדאי לקרוא את המאמר אופטימיזציה של טעינת משאבים באמצעות Fetch Priority API כדי לקבל את כל הפרטים, איך להירשם לגרסת המקור לניסיון, וכמה דוגמאות מצוינות לאופן שבו תוכלו לשפר את ביצועי העיבוד.
אמולציה של Chrome 100 במחרוזת UA
בתחילת השנה הבאה נגיע ל-Chrome 100, שהוא מספר גרסה בן שלוש ספרות. צריך לבדוק כל קוד שבודק את מספרי הגרסאות או מנתח את מחרוזת ה-UA כדי לוודא שהוא מטפל בשלוש ספרות.
החל מגרסה 96 של Chrome, יש דגל חדש #force-major-version-to-100
שמשנה את מספר הגרסה הנוכחית ל-100, כדי לוודא שהכול פועל כמו שצריך.
מידע נוסף מופיע במאמר אילוץ הגרסה הראשית של Chrome לערך 100 במחרוזת ה-User-Agent.
מפגש הפסגה של מפתחי Chrome
כנס המפתחים של Chrome מסיימים את כל הדרך. כל הסרטונים והתוכן זמינים באינטרנט. תוכלו לבקר באתר של Chrome Dev Summit. אם פספסתם את נאום הפתיחה או השידור החי, תוכלו לצפות בפלייליסט של CDS בערוץ של מפתחי Chrome ב-YouTube.
ופעולות נוספות.
כמובן שיש עוד המון אפשרויות.
- המטמון לדף הקודם/הבא, או
bfcache
, זמין עכשיו בגרסה יציבה, ומשלב את Chrome יחד עם Firefox ו-Safari.
קריאה נוספת
המאמר הזה מתייחס רק לחלק מההדגשים העיקריים. בקישורים שבהמשך תוכלו למצוא שינויים נוספים ב-Chrome 96.
- מה חדש בכלי הפיתוח ל-Chrome (96)
- הוצאה משימוש והסרות של Chrome 96
- עדכוני ChromeStatus.com ל-Chrome 96
- מה חדש ב-JavaScript ב-Chrome 96
- רשימת שינויים במאגרי מקורות של Chromium
- יומן ההפצה של Chrome
להרשמה
כדי להתעדכן, הירשמו לערוץ YouTube של מפתחי Chrome, ותקבלו הודעה באימייל בכל פעם שנשיק סרטון חדש.
שמי פיט לפייז', וברגע שהגרסה של Chrome 97 תושק, אני אהיה כאן כדי לספר לכם מה חדש ב-Chrome!