חדש ב-Chrome 80

Pete LePage

Chrome 80 מושק עכשיו, ויש המון דברים חדשים למפתחים!

יש תמיכה בנושאים הבאים:

שמי Pete LePage, אז בואו נראה מה חדש למפתחים ב-Chrome 80!

עובדי מודול

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

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

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

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

כל הפרטים מופיעים בפוסט בבלוג Optional Chaining בבלוג v8.

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

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

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

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

הכלי לבחירת אנשי קשר

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

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

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

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

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

API להוספת תוכן לאינדקס

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

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. לפרטים מלאים, קראו את הפוסט של ג'ף איך להוסיף לאינדקס את הדפים שמתאימים לעבודה במצב אופליין באמצעות 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, לכן כדאי לעיין בפוסט Notification Triggers של תום ב-web.dev כדי לקבל פרטים מלאים.

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

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

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

לקבלת רשימה מלאה של התכונות בגרסת המקור לניסיון.

ועוד

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

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

קריאה נוספת

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

להרשמה

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

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