חדש ב-Chrome 80

Pete LePage

אנחנו משיקים עכשיו את Chrome 80, והוא כולל המון תכונות חדשות למפתחים.

יש תמיכה באפשרויות הבאות:

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

מודולים של workers

זמין עכשיו מצב חדש ל-Web Workers – Module Workers – עם יתרונות הארגונומיה והביצועים של מודולים של JavaScript. האפשרות החדשה {type: "module"} נוספה ל-constructor של Worker, והיא משנה את האופן שבו סקריפטים נטענים ומבוצעים בהתאם ל-<script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

המעבר למודול JavaScript מאפשר גם להשתמש בייבוא דינמי לקוד של טעינת נתונים בזמן אמת, בלי לחסום את ביצוע ה-worker. פרטים נוספים זמינים בפוסט של Jason‏ Threading the web with module workers ב-web.dev.

שרשור אופציונלי

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

// Error prone-version, could throw.
const nameLength = db.user.name.length;

בדיקה של כל ערך לפני שממשיכים יכולה בקלות להפוך להצהרת if בתצוגת עץ עמוקה, או לדרוש בלוק try או catch.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

ב-Chrome 80 נוספה תמיכה בתכונה חדשה של JavaScript שנקראת שרשור אופציונלי. כשמשתמשים בשרשור אופציונלי, אם אחד המאפיינים מחזיר null או undefined, במקום להפעיל שגיאה, המערכת פשוט מחזירה את הערך undefined.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

בפוסט Optional Chaining בבלוג של v8 מוסבר בהרחבה על הנושא.

סיום תקופת הניסיון בגרסת המקור

יש שלוש יכולות חדשות שעברנו מהגרסה הזמנית למצב יציב, כך שכל אתר יכול להשתמש בהן בלי אסימון.

סנכרון תקופתי ברקע

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

בורר אנשי הקשר

ה-API הבא הוא Contact Picker API, ממשק API על פי דרישה שמאפשר למשתמשים לבחור רשומות מרשימת אנשי הקשר שלהם ולשתף פרטים מוגבלים של הרשומות שנבחרו עם אתר אינטרנט.

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

לבסוף, השיטה Get Installed Related Apps מאפשרת לאפליקציית האינטרנט לבדוק אם האפליקציה המקורית מותקנת במכשיר של המשתמש.

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

גרסאות מקור חדשות לניסיון

Content indexing API

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

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

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

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

אחרי שהאינדקס מאוכלס, הוא מוצג באזור ייעודי בדף'הורדות' ב-Chrome ל-Android. פרטים מלאים זמינים בפוסט של Jeff‏ הוספת דפים שפועלים במצב אופליין לאינדקס באמצעות Content Indexing API באתר web.dev.

טריגרים של התראות

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

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

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

כדי לתזמן התראה, צריך לבצע קריאה ל-showNotification ברישום של ה-service worker. באפשרויות ההתראות, מוסיפים מאפיין showTrigger עם TimestampTrigger. כשהזמן יגיע, ההתראה תוצג בדפדפן.

תקופת הניסיון בגרסת המקור אמורה להימשך עד ל-Chrome 83, לכן כדאי לעיין בפוסט של Tom בנושא טריגרים להתרעות ב-web.dev כדי לקבל פרטים מלאים.

גרסאות מקור אחרות לניסיון

יש כמה תכונות אחרות לניסיון בגרסת המקור שזמינות החל מ-Chrome 80:

  • Web Serial
  • היכולת של אפליקציות PWA להירשם כרכיבי handler של קבצים
  • מאפיינים חדשים לבורר אנשי הקשר

רשימה מלאה של התכונות שזמינות בתקופת הניסיון במקור

ועוד

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

  • עכשיו אפשר לקשר ישירות לקטע טקסט בדף באמצעות #:~:text=something. Chrome יגלול למקרה הראשון של מקטע הטקסט הזה וידגיש אותו. לדוגמה: https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • הגדרת display: minimal-ui באפליקציית PWA למחשב מוסיפה לחצן 'הקודם' ו'טעינה מחדש' לסרגל הכותרת של אפליקציית ה-PWA המותקנת.
  • בנוסף, עכשיו יש ב-Chrome תמיכה בשימוש בתמונות SVG בתור סמלי favicon.

קריאה נוספת

הרשימה הזו כוללת רק חלק מהנקודות העיקריות. בקישורים הבאים מפורטים שינויים נוספים בגרסה 80 של Chrome.

להרשמה

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

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