חדש ב-Chrome 84

Pete LePage

אנחנו מתחילים להשיק את Chrome 84 בגרסה היציבה.

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

אני Pete LePage ואני עובד/ת וקולעים מהבית. בואו נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 84!

קיצורי דרך של סמלי אפליקציות

קיצורי דרך לסמלי האפליקציה ב-PWA של Twitter

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

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


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

לפרטים מלאים קראו את המאמר ביצוע משימות במהירות בעזרת קיצורי דרך של אפליקציות.

ממשק API לאנימציות אינטרנט

ב-Chrome 84 נוספו ל-Web Animations API מגוון רחב של פיצ'רים שלא נתמכים בעבר.

  • הפונקציות animation.ready ו-animation.finished הומרו ל-Promise.
  • הדפדפן יכול עכשיו לנקות ולהסיר אנימציות ישנות, וכך לחסוך בזיכרון ולשפר את הביצועים.
  • עכשיו אפשר לשלב אנימציות באמצעות מצבי קומפוזיציה – באמצעות האפשרויות add ו-accumulate.

אני לא יכול להתאים בדיוק את כל השיפורים או להציע דוגמאות טובות כאן, אז כדאי לעיין במאמר השיפורים Web Animations API ב-Chromium 84 כדי לקבל פרטים מלאים.

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

אם התוכן זמין ללא חיבור לרשת. אבל המשתמש לא יודע על כך? האם הוא באמת זמין? יש בעיית גילוי!

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

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


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

רוצה לראות מה כבר קיים באינדקס? מתקשרים למספר index.getAll() שמופיע ברישום של עובד השירות.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

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

Wake lock API

הטמעת Wake lock באתר של Betty Crocker.

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

למעשה, באתר של Betty Crocker משתמשים באפשרות הזו היום, והם פרסמו מחקר מקרה ב-web.dev שבו מוצגת עלייה של 300% במדדים של כוונת הרכישה.

כדי לקבל נעילת מצב שינה, קוראים לפונקציה navigator.wakeLock.request(), והיא מחזירה אובייקט WakeLockSentinel שמשמש ל'שחרור' של ה-wake Lock.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

כמובן שיש עוד משהו, אז כדאי לבדוק את הישארו ערים בעזרת Screen Wake Lock API, אבל לפחות המסך שלי לא יכסה יותר בקמח!

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

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

זיהוי חוסר פעילות

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

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

במאמר זיהוי משתמשים לא פעילים באמצעות Idle Detection API מוסבר בהרחבה על ה-API ועל האופן שבו אפשר להתחיל להתנסות בו כבר היום.

Web Assembly SIMD

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

למידע נוסף על WebAssembly SIMD, קראו את המאמר אפליקציות מהירות ומקבילות עם WebAssembly SIMD.

ועוד

Chrome 84 הוא גדול, אבל יש כמה עדכונים חשובים נוספים שאני רוצה לציין.

קריאה נוספת

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

להרשמה

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

אני פיט לעמוד ועדיין צריך להסתפר, אבל ברגע ש-Chrome 85 ישוחרר, אספר לך מה חדש ב-Chrome!