חדש ב-Chrome 80

Pete LePage

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

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

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

מודולים של workers

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

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

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

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

הבא בתור הוא 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. לאחר מכן, כשהזמן יגיע, ההתראה תוצג בדפדפן.

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

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